Browse Source

use stylesheet; bump version number to 0.2.3

iou90 7 years ago
parent
commit
41cd08a3fb
3 changed files with 29 additions and 15 deletions
  1. 14
    7
      autoHeightWebView/index.android.js
  2. 14
    7
      autoHeightWebView/index.ios.js
  3. 1
    1
      package.json

+ 14
- 7
autoHeightWebView/index.android.js View File

11
     Animated,
11
     Animated,
12
     DeviceEventEmitter,
12
     DeviceEventEmitter,
13
     Dimensions,
13
     Dimensions,
14
+    StyleSheet,
14
     Platform,
15
     Platform,
15
     UIManager,
16
     UIManager,
16
     View,
17
     View,
172
             webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
173
             webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
173
         }
174
         }
174
         return (
175
         return (
175
-            <Animated.View style={[{
176
+            <Animated.View style={[Styles.container, {
176
                 opacity: enableAnimation ? this.opacityAnimatedValue : 1,
177
                 opacity: enableAnimation ? this.opacityAnimatedValue : 1,
177
-                width: ScreenWidth,
178
                 height: height + heightOffset,
178
                 height: height + heightOffset,
179
-                backgroundColor: 'transparent'
180
             }, style]}>
179
             }, style]}>
181
                 {
180
                 {
182
                     isChangingSource ? null :
181
                     isChangingSource ? null :
183
                         <RCTAutoHeightWebView
182
                         <RCTAutoHeightWebView
184
                             ref={webview => this.webview = webview}
183
                             ref={webview => this.webview = webview}
185
-                            style={{
186
-                                flex: 1,
187
-                                backgroundColor: 'transparent'
188
-                            }}
184
+                            style={Styles.webView}
189
                             javaScriptEnabled={true}
185
                             javaScriptEnabled={true}
190
                             injectedJavaScript={script + customScript}
186
                             injectedJavaScript={script + customScript}
191
                             scrollEnabled={false}
187
                             scrollEnabled={false}
231
 
227
 
232
 const IsBelowKitKat = Platform.Version < 19;
228
 const IsBelowKitKat = Platform.Version < 19;
233
 
229
 
230
+const Styles = StyleSheet.create({
231
+    container: {
232
+        width: ScreenWidth,
233
+        backgroundColor: 'transparent'
234
+    },
235
+    webView: {
236
+        flex: 1,
237
+        backgroundColor: 'transparent'
238
+    }
239
+});
240
+
234
 const BaseScript =
241
 const BaseScript =
235
     IsBelowKitKat ?
242
     IsBelowKitKat ?
236
         `
243
         `

+ 14
- 7
autoHeightWebView/index.ios.js View File

8
 import {
8
 import {
9
     Animated,
9
     Animated,
10
     Dimensions,
10
     Dimensions,
11
+    StyleSheet,
11
     View,
12
     View,
12
     WebView
13
     WebView
13
 } from 'react-native';
14
 } from 'react-native';
84
         const { enableAnimation, source, heightOffset, customScript, style } = this.props;
85
         const { enableAnimation, source, heightOffset, customScript, style } = this.props;
85
         const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
86
         const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
86
         return (
87
         return (
87
-            <Animated.View style={[{
88
+            <Animated.View style={[Styles.container, {
88
                 opacity: enableAnimation ? this.opacityAnimatedValue : 1,
89
                 opacity: enableAnimation ? this.opacityAnimatedValue : 1,
89
-                width: ScreenWidth,
90
                 height: height + heightOffset,
90
                 height: height + heightOffset,
91
-                backgroundColor: 'transparent'
92
             }, style]}>
91
             }, style]}>
93
                 <WebView
92
                 <WebView
94
-                    style={{
95
-                        flex: 1,
96
-                        backgroundColor: 'transparent'
97
-                    }}
93
+                    style={Styles.webView}
98
                     injectedJavaScript={script + customScript}
94
                     injectedJavaScript={script + customScript}
99
                     scrollEnabled={false}
95
                     scrollEnabled={false}
100
                     source={webViewSource}
96
                     source={webViewSource}
130
 
126
 
131
 const ScreenWidth = Dimensions.get('window').width;
127
 const ScreenWidth = Dimensions.get('window').width;
132
 
128
 
129
+const Styles = StyleSheet.create({
130
+    container: {
131
+        width: ScreenWidth,
132
+        backgroundColor: 'transparent'
133
+    },
134
+    webView: {
135
+        flex: 1,
136
+        backgroundColor: 'transparent'
137
+    }
138
+});
139
+
133
 // note that it can not get height when there are only text objects in a html body which does not make any sense 
140
 // note that it can not get height when there are only text objects in a html body which does not make any sense 
134
 const BaseScript =
141
 const BaseScript =
135
     `
142
     `

+ 1
- 1
package.json View File

1
 {
1
 {
2
   "name": "react-native-autoheight-webview",
2
   "name": "react-native-autoheight-webview",
3
-  "version": "0.2.2",
3
+  "version": "0.2.3",
4
   "description": "An auto height webview for React Native",
4
   "description": "An auto height webview for React Native",
5
   "main": "autoHeightWebView",
5
   "main": "autoHeightWebView",
6
   "files": [
6
   "files": [