Browse Source

use document.body.offsetHeight instead of document.body.firstChild.clientHeight on iOS to support uri & raw text autoheight; default scalesPageToFit to false to fix the issue of react native 0.47 (Fix scalesPageToFit default property for iOS WebView. (185948604c/) - @peterp);

iou90 7 years ago
parent
commit
c775c298ed
3 changed files with 73 additions and 56 deletions
  1. 32
    29
      autoHeightWebView/index.android.js
  2. 30
    26
      autoHeightWebView/index.ios.js
  3. 11
    1
      demo/yarn.lock

+ 32
- 29
autoHeightWebView/index.android.js View File

23
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, { nativeOnly: { messagingEnabled: PropTypes.bool } });
23
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, { nativeOnly: { messagingEnabled: PropTypes.bool } });
24
 
24
 
25
 export default class AutoHeightWebView extends PureComponent {
25
 export default class AutoHeightWebView extends PureComponent {
26
+    static propTypes = {
27
+        source: WebView.propTypes.source,
28
+        onHeightUpdated: PropTypes.func,
29
+        customScript: PropTypes.string,
30
+        enableAnimation: PropTypes.bool,
31
+        // if set to true may cause some layout issues (smaller font size)
32
+        scalesPageToFit: PropTypes.bool,
33
+        // only works on enable animation
34
+        animationDuration: PropTypes.number,
35
+        // offset of rn webview margin
36
+        heightOffset: PropTypes.number,
37
+        // baseUrl not work in android 4.3 or below version
38
+        enableBaseUrl: PropTypes.bool,
39
+        style: ViewPropTypes.style,
40
+        // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
41
+        files: PropTypes.arrayOf(PropTypes.shape({
42
+            href: PropTypes.string,
43
+            type: PropTypes.string,
44
+            rel: PropTypes.string
45
+        }))
46
+    }
47
+
48
+    static defaultProps = {
49
+        scalesPageToFit: false,
50
+        enableBaseUrl: false,
51
+        enableAnimation: true,
52
+        animationDuration: 555,
53
+        heightOffset: 20
54
+    }
55
+
26
     constructor(props) {
56
     constructor(props) {
27
         super(props);
57
         super(props);
28
         this.onMessage = this.onMessage.bind(this);
58
         this.onMessage = this.onMessage.bind(this);
165
 
195
 
166
     render() {
196
     render() {
167
         const { height, script, isChangingSource, heightOffset } = this.state;
197
         const { height, script, isChangingSource, heightOffset } = this.state;
168
-        const { enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
198
+        const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
169
         let webViewSource = source;
199
         let webViewSource = source;
170
         if (enableBaseUrl) {
200
         if (enableBaseUrl) {
171
             webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
201
             webViewSource = Object.assign({}, source, { baseUrl: 'file:///android_asset/web/' });
182
                             style={Styles.webView}
212
                             style={Styles.webView}
183
                             javaScriptEnabled={true}
213
                             javaScriptEnabled={true}
184
                             injectedJavaScript={script + customScript}
214
                             injectedJavaScript={script + customScript}
185
-                            scrollEnabled={false}
215
+                            scalesPageToFit={scalesPageToFit}
186
                             source={webViewSource}
216
                             source={webViewSource}
187
                             onMessage={this.onMessage}
217
                             onMessage={this.onMessage}
188
                             messagingEnabled={true}
218
                             messagingEnabled={true}
194
     }
224
     }
195
 }
225
 }
196
 
226
 
197
-AutoHeightWebView.propTypes = {
198
-    source: WebView.propTypes.source,
199
-    onHeightUpdated: PropTypes.func,
200
-    customScript: PropTypes.string,
201
-    enableAnimation: PropTypes.bool,
202
-    // only works on enable animation
203
-    animationDuration: PropTypes.number,
204
-    // offset of rn webview margin
205
-    heightOffset: PropTypes.number,
206
-    // baseUrl not work in android 4.3 or below version
207
-    enableBaseUrl: PropTypes.bool,
208
-    style: ViewPropTypes.style,
209
-    // works if set enableBaseUrl to true; add web/files... to android/app/src/assets/
210
-    files: PropTypes.arrayOf(PropTypes.shape({
211
-        href: PropTypes.string,
212
-        type: PropTypes.string,
213
-        rel: PropTypes.string
214
-    }))
215
-}
216
-
217
-AutoHeightWebView.defaultProps = {
218
-    enableAnimation: true,
219
-    animationDuration: 555,
220
-    enableBaseUrl: false,
221
-    heightOffset: 20
222
-}
223
-
224
 const ScreenWidth = Dimensions.get('window').width;
227
 const ScreenWidth = Dimensions.get('window').width;
225
 
228
 
226
 const IsBelowKitKat = Platform.Version < 19;
229
 const IsBelowKitKat = Platform.Version < 19;

+ 30
- 26
autoHeightWebView/index.ios.js View File

14
 import PropTypes from 'prop-types';
14
 import PropTypes from 'prop-types';
15
 
15
 
16
 export default class AutoHeightWebView extends PureComponent {
16
 export default class AutoHeightWebView extends PureComponent {
17
+    static propTypes = {
18
+        source: WebView.propTypes.source,
19
+        onHeightUpdated: PropTypes.func,
20
+        customScript: PropTypes.string,
21
+        enableAnimation: PropTypes.bool,
22
+        // if set to true may cause some layout issues (smaller font size)
23
+        scalesPageToFit: PropTypes.bool,
24
+        // only works on enable animation
25
+        animationDuration: PropTypes.number,
26
+        // offset of rn webview margin
27
+        heightOffset: PropTypes.number,
28
+        style: ViewPropTypes.style,
29
+        // add web/files... to project root
30
+        files: PropTypes.arrayOf(PropTypes.shape({
31
+            href: PropTypes.string,
32
+            type: PropTypes.string,
33
+            rel: PropTypes.string
34
+        }))
35
+    }
36
+
37
+    static defaultProps = {
38
+        scalesPageToFit: false,
39
+        enableAnimation: true,
40
+        animationDuration: 555,
41
+        heightOffset: 12
42
+    }
43
+
17
     constructor(props) {
44
     constructor(props) {
18
         super(props);
45
         super(props);
19
         this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
46
         this.handleNavigationStateChange = this.handleNavigationStateChange.bind(this);
80
 
107
 
81
     render() {
108
     render() {
82
         const { height, script } = this.state;
109
         const { height, script } = this.state;
83
-        const { enableAnimation, source, heightOffset, customScript, style } = this.props;
110
+        const { scalesPageToFit, enableAnimation, source, heightOffset, customScript, style } = this.props;
84
         const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
111
         const webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
85
         return (
112
         return (
86
             <Animated.View style={[Styles.container, {
113
             <Animated.View style={[Styles.container, {
91
                     style={Styles.webView}
118
                     style={Styles.webView}
92
                     injectedJavaScript={script + customScript}
119
                     injectedJavaScript={script + customScript}
93
                     scrollEnabled={false}
120
                     scrollEnabled={false}
121
+                    scalesPageToFit={scalesPageToFit}
94
                     source={webViewSource}
122
                     source={webViewSource}
95
                     onNavigationStateChange={this.handleNavigationStateChange} />
123
                     onNavigationStateChange={this.handleNavigationStateChange} />
96
             </Animated.View>
124
             </Animated.View>
98
     }
126
     }
99
 }
127
 }
100
 
128
 
101
-AutoHeightWebView.propTypes = {
102
-    source: WebView.propTypes.source,
103
-    onHeightUpdated: PropTypes.func,
104
-    customScript: PropTypes.string,
105
-    enableAnimation: PropTypes.bool,
106
-    // only works on enable animation
107
-    animationDuration: PropTypes.number,
108
-    // offset of rn webview margin
109
-    heightOffset: PropTypes.number,
110
-    style: ViewPropTypes.style,
111
-    // add web/files... to project root
112
-    files: PropTypes.arrayOf(PropTypes.shape({
113
-        href: PropTypes.string,
114
-        type: PropTypes.string,
115
-        rel: PropTypes.string
116
-    }))
117
-}
118
-
119
-AutoHeightWebView.defaultProps = {
120
-    enableAnimation: true,
121
-    animationDuration: 555,
122
-    heightOffset: 12
123
-}
124
-
125
 const ScreenWidth = Dimensions.get('window').width;
129
 const ScreenWidth = Dimensions.get('window').width;
126
 
130
 
127
 const Styles = StyleSheet.create({
131
 const Styles = StyleSheet.create({
141
     ; (function () {
145
     ; (function () {
142
         var i = 0;
146
         var i = 0;
143
         function updateHeight() {
147
         function updateHeight() {
144
-            document.title = document.body.firstChild.clientHeight;
148
+            document.title = document.body.offsetHeight;
145
             window.location.hash = ++i;
149
             window.location.hash = ++i;
146
         }
150
         }
147
         updateHeight();
151
         updateHeight();

+ 11
- 1
demo/yarn.lock View File

1737
   version "0.3.5"
1737
   version "0.3.5"
1738
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.3.5.tgz#83240eab2fb5b00b04aab8c74b0471e9cba7ad8c"
1738
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.3.5.tgz#83240eab2fb5b00b04aab8c74b0471e9cba7ad8c"
1739
 
1739
 
1740
+immutable@^3.8.1:
1741
+  version "3.8.1"
1742
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.8.1.tgz#200807f11ab0f72710ea485542de088075f68cd2"
1743
+
1740
 imurmurhash@^0.1.4:
1744
 imurmurhash@^0.1.4:
1741
   version "0.1.4"
1745
   version "0.1.4"
1742
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
1746
   resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
2877
   dependencies:
2881
   dependencies:
2878
     asap "~2.0.3"
2882
     asap "~2.0.3"
2879
 
2883
 
2880
-prop-types@^15.5.6, prop-types@^15.5.8:
2884
+prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8:
2881
   version "15.5.10"
2885
   version "15.5.10"
2882
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
2886
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
2883
   dependencies:
2887
   dependencies:
2942
     shell-quote "^1.6.1"
2946
     shell-quote "^1.6.1"
2943
     ws "^2.0.3"
2947
     ws "^2.0.3"
2944
 
2948
 
2949
+react-native-autoheight-webview@../:
2950
+  version "0.2.5"
2951
+  dependencies:
2952
+    immutable "^3.8.1"
2953
+    prop-types "^15.5.10"
2954
+
2945
 react-native@0.45.1:
2955
 react-native@0.45.1:
2946
   version "0.45.1"
2956
   version "0.45.1"
2947
   resolved "https://registry.npmjs.org/react-native/-/react-native-0.45.1.tgz#b3283c4a88233421f9c662a2ff1a4ccc8a9f07c0"
2957
   resolved "https://registry.npmjs.org/react-native/-/react-native-0.45.1.tgz#b3283c4a88233421f9c662a2ff1a4ccc8a9f07c0"