Browse Source

Merge branch 'master' of https://github.com/iou90/react-native-autoheight-webview

# Conflicts:
#	autoHeightWebView/index.ios.js
iou90 6 years ago
parent
commit
c6b9137af2
2 changed files with 60 additions and 72 deletions
  1. 53
    72
      autoHeightWebView/index.android.js
  2. 7
    0
      autoHeightWebView/index.ios.js

+ 53
- 72
autoHeightWebView/index.android.js View File

1
-"use strict";
1
+'use strict';
2
 
2
 
3
-import React, { PureComponent } from "react";
3
+import React, { PureComponent } from 'react';
4
 
4
 
5
 import {
5
 import {
6
   findNodeHandle,
6
   findNodeHandle,
14
   View,
14
   View,
15
   ViewPropTypes,
15
   ViewPropTypes,
16
   WebView
16
   WebView
17
-} from "react-native";
17
+} from 'react-native';
18
 
18
 
19
-import PropTypes from "prop-types";
19
+import PropTypes from 'prop-types';
20
 
20
 
21
-import Immutable from "immutable";
21
+import Immutable from 'immutable';
22
 
22
 
23
-const RCTAutoHeightWebView = requireNativeComponent(
24
-  "RCTAutoHeightWebView",
25
-  AutoHeightWebView,
26
-  { nativeOnly:
27
-    {
28
-      nativeOnly: {
29
-        onLoadingStart: true,
30
-        onLoadingError: true,
31
-        onLoadingFinish: true,
32
-        messagingEnabled: PropTypes.bool
33
-      }
23
+const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
24
+  nativeOnly: {
25
+    nativeOnly: {
26
+      onLoadingStart: true,
27
+      onLoadingError: true,
28
+      onLoadingFinish: true,
29
+      messagingEnabled: PropTypes.bool
34
     }
30
     }
35
-   }
36
-);
31
+  }
32
+});
37
 
33
 
38
 export default class AutoHeightWebView extends PureComponent {
34
 export default class AutoHeightWebView extends PureComponent {
39
   static propTypes = {
35
   static propTypes = {
46
     scalesPageToFit: PropTypes.bool,
42
     scalesPageToFit: PropTypes.bool,
47
     // only works on enable animation
43
     // only works on enable animation
48
     animationDuration: PropTypes.number,
44
     animationDuration: PropTypes.number,
49
-    // offset of rn webview margin
45
+    // offset of rn webView margin
50
     heightOffset: PropTypes.number,
46
     heightOffset: PropTypes.number,
51
     // baseUrl not work in android 4.3 or below version
47
     // baseUrl not work in android 4.3 or below version
52
     enableBaseUrl: PropTypes.bool,
48
     enableBaseUrl: PropTypes.bool,
81
       this.opacityAnimatedValue = new Animated.Value(0);
77
       this.opacityAnimatedValue = new Animated.Value(0);
82
     }
78
     }
83
     if (IsBelowKitKat) {
79
     if (IsBelowKitKat) {
84
-      this.listenWebViewBridgeMessage = this.listenWebViewBridgeMessage.bind(
85
-        this
86
-      );
80
+      this.listenWebViewBridgeMessage = this.listenWebViewBridgeMessage.bind(this);
87
     }
81
     }
88
-    let initialScript = props.files
89
-      ? this.appendFilesToHead(props.files, BaseScript)
90
-      : BaseScript;
91
-    initialScript = props.customStyle
92
-      ? this.appendStylesToHead(props.customStyle, initialScript)
93
-      : initialScript;
82
+    let initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
83
+    initialScript = props.customStyle ? this.appendStylesToHead(props.customStyle, initialScript) : initialScript;
94
     this.state = {
84
     this.state = {
95
       isChangingSource: false,
85
       isChangingSource: false,
96
       height: 0,
86
       height: 0,
101
 
91
 
102
   componentWillMount() {
92
   componentWillMount() {
103
     if (IsBelowKitKat) {
93
     if (IsBelowKitKat) {
104
-      DeviceEventEmitter.addListener(
105
-        "webViewBridgeMessage",
106
-        this.listenWebViewBridgeMessage
107
-      );
94
+      DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
108
     }
95
     }
109
   }
96
   }
110
 
97
 
113
   }
100
   }
114
 
101
 
115
   componentWillReceiveProps(nextProps) {
102
   componentWillReceiveProps(nextProps) {
116
-    // injectedJavaScript only works when webview reload (source changed)
117
-    if (
118
-      Immutable.is(
119
-        Immutable.fromJS(this.props.source),
120
-        Immutable.fromJS(nextProps.source)
121
-      )
122
-    ) {
103
+    // injectedJavaScript only works when webView reload (source changed)
104
+    if (Immutable.is(Immutable.fromJS(this.props.source), Immutable.fromJS(nextProps.source))) {
123
       return;
105
       return;
124
     } else {
106
     } else {
125
       this.setState(
107
       this.setState(
147
   componentWillUnmount() {
129
   componentWillUnmount() {
148
     this.stopInterval();
130
     this.stopInterval();
149
     if (IsBelowKitKat) {
131
     if (IsBelowKitKat) {
150
-      DeviceEventEmitter.removeListener(
151
-        "webViewBridgeMessage",
152
-        this.listenWebViewBridgeMessage
153
-      );
132
+      DeviceEventEmitter.removeListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
154
     }
133
     }
155
   }
134
   }
156
 
135
 
162
   // below kitkat
141
   // below kitkat
163
   sendToWebView(message) {
142
   sendToWebView(message) {
164
     UIManager.dispatchViewManagerCommand(
143
     UIManager.dispatchViewManagerCommand(
165
-      findNodeHandle(this.webview),
144
+      findNodeHandle(this.webView),
166
       UIManager.RCTAutoHeightWebView.Commands.sendToWebView,
145
       UIManager.RCTAutoHeightWebView.Commands.sendToWebView,
167
       [String(message)]
146
       [String(message)]
168
     );
147
     );
170
 
149
 
171
   postMessage(data) {
150
   postMessage(data) {
172
     UIManager.dispatchViewManagerCommand(
151
     UIManager.dispatchViewManagerCommand(
173
-      findNodeHandle(this.webview),
152
+      findNodeHandle(this.webView),
174
       UIManager.RCTAutoHeightWebView.Commands.postMessage,
153
       UIManager.RCTAutoHeightWebView.Commands.postMessage,
175
       [String(data)]
154
       [String(data)]
176
     );
155
     );
180
     this.finishInterval = false;
159
     this.finishInterval = false;
181
     this.interval = setInterval(() => {
160
     this.interval = setInterval(() => {
182
       if (!this.finishInterval) {
161
       if (!this.finishInterval) {
183
-        IsBelowKitKat
184
-          ? this.sendToWebView("getBodyHeight")
185
-          : this.postMessage("getBodyHeight");
162
+        IsBelowKitKat ? this.sendToWebView('getBodyHeight') : this.postMessage('getBodyHeight');
186
       }
163
       }
187
     }, 205);
164
     }, 205);
188
   }
165
   }
199
   }
176
   }
200
 
177
 
201
   onMessage(e) {
178
   onMessage(e) {
202
-    const height = parseInt(
203
-      IsBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data
204
-    );
179
+    const height = parseInt(IsBelowKitKat ? e.nativeEvent.message : e.nativeEvent.data);
205
     if (height) {
180
     if (height) {
206
       if (this.props.enableAnimation) {
181
       if (this.props.enableAnimation) {
207
         this.opacityAnimatedValue.setValue(0);
182
         this.opacityAnimatedValue.setValue(0);
230
     if (!files) {
205
     if (!files) {
231
       return script;
206
       return script;
232
     }
207
     }
233
-    return files.reduceRight((file, combinedScript) => `
208
+    return files.reduceRight(
209
+      (file, combinedScript) => `
234
       var link  = document.createElement('link');
210
       var link  = document.createElement('link');
235
       link.rel  = '${file.rel}';
211
       link.rel  = '${file.rel}';
236
       link.type = '${file.type}';
212
       link.type = '${file.type}';
237
       link.href = '${file.href}';
213
       link.href = '${file.href}';
238
       document.head.appendChild(link);
214
       document.head.appendChild(link);
239
       ${combinedScript}
215
       ${combinedScript}
240
-    `, script);
216
+    `,
217
+      script
218
+    );
241
   }
219
   }
242
 
220
 
243
   appendStylesToHead(styles, script) {
221
   appendStylesToHead(styles, script) {
245
       return script;
223
       return script;
246
     }
224
     }
247
     // Escape any single quotes or newlines in the CSS with .replace()
225
     // Escape any single quotes or newlines in the CSS with .replace()
248
-    const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n')
226
+    const escaped = styles.replace(/\'/g, "\\'").replace(/\n/g, '\\n');
249
     return `
227
     return `
250
       var styleElement = document.createElement('style');
228
       var styleElement = document.createElement('style');
251
       var styleText = document.createTextNode('${escaped}');
229
       var styleText = document.createTextNode('${escaped}');
255
     `;
233
     `;
256
   }
234
   }
257
 
235
 
258
-  onLoadingStart = (event) => {
236
+  onLoadingStart = event => {
259
     var onLoadStart = this.props.onLoadStart;
237
     var onLoadStart = this.props.onLoadStart;
260
     onLoadStart && onLoadStart(event);
238
     onLoadStart && onLoadStart(event);
261
   };
239
   };
262
 
240
 
263
-  onLoadingError = (event) => {
264
-    var {onError, onLoadEnd} = this.props;
241
+  onLoadingError = event => {
242
+    var { onError, onLoadEnd } = this.props;
265
     onError && onError(event);
243
     onError && onError(event);
266
     onLoadEnd && onLoadEnd(event);
244
     onLoadEnd && onLoadEnd(event);
267
     console.warn('Encountered an error loading page', event.nativeEvent);
245
     console.warn('Encountered an error loading page', event.nativeEvent);
268
   };
246
   };
269
 
247
 
270
-  onLoadingFinish = (event) => {
271
-    var {onLoad, onLoadEnd} = this.props;
248
+  onLoadingFinish = event => {
249
+    var { onLoad, onLoadEnd } = this.props;
272
     onLoad && onLoad(event);
250
     onLoad && onLoad(event);
273
     onLoadEnd && onLoadEnd(event);
251
     onLoadEnd && onLoadEnd(event);
274
   };
252
   };
275
 
253
 
254
+  getWebView = webView => (this.webView = webView);
255
+
256
+  stopLoading() {
257
+    UIManager.dispatchViewManagerCommand(
258
+      findNodeHandle(this.webView),
259
+      UIManager.RCTAutoHeightWebView.Commands.stopLoading,
260
+      null
261
+    );
262
+  }
263
+
276
   render() {
264
   render() {
277
     const { height, script, isChangingSource, heightOffset } = this.state;
265
     const { height, script, isChangingSource, heightOffset } = this.state;
278
-    const {
279
-      scalesPageToFit,
280
-      enableAnimation,
281
-      source,
282
-      customScript,
283
-      style,
284
-      enableBaseUrl
285
-    } = this.props;
266
+    const { scalesPageToFit, enableAnimation, source, customScript, style, enableBaseUrl } = this.props;
286
     let webViewSource = source;
267
     let webViewSource = source;
287
     if (enableBaseUrl) {
268
     if (enableBaseUrl) {
288
       webViewSource = Object.assign({}, source, {
269
       webViewSource = Object.assign({}, source, {
289
-        baseUrl: "file:///android_asset/web/"
270
+        baseUrl: 'file:///android_asset/web/'
290
       });
271
       });
291
     }
272
     }
292
     return (
273
     return (
305
             onLoadingStart={this.onLoadingStart}
286
             onLoadingStart={this.onLoadingStart}
306
             onLoadingFinish={this.onLoadingFinish}
287
             onLoadingFinish={this.onLoadingFinish}
307
             onLoadingError={this.onLoadingError}
288
             onLoadingError={this.onLoadingError}
308
-            ref={webview => (this.webview = webview)}
289
+            ref={this.getWebView}
309
             style={Styles.webView}
290
             style={Styles.webView}
310
             javaScriptEnabled={true}
291
             javaScriptEnabled={true}
311
             injectedJavaScript={script + customScript}
292
             injectedJavaScript={script + customScript}
322
   }
303
   }
323
 }
304
 }
324
 
305
 
325
-const ScreenWidth = Dimensions.get("window").width;
306
+const ScreenWidth = Dimensions.get('window').width;
326
 
307
 
327
 const IsBelowKitKat = Platform.Version < 19;
308
 const IsBelowKitKat = Platform.Version < 19;
328
 
309
 
329
 const Styles = StyleSheet.create({
310
 const Styles = StyleSheet.create({
330
   container: {
311
   container: {
331
     width: ScreenWidth,
312
     width: ScreenWidth,
332
-    backgroundColor: "transparent"
313
+    backgroundColor: 'transparent'
333
   },
314
   },
334
   webView: {
315
   webView: {
335
     flex: 1,
316
     flex: 1,
336
-    backgroundColor: "transparent"
317
+    backgroundColor: 'transparent'
337
   }
318
   }
338
 });
319
 });
339
 
320
 

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

79
     }
79
     }
80
   };
80
   };
81
 
81
 
82
+  getWebView = webView => (this.webView = webView);
83
+
84
+  stopLoading() {
85
+    this.webView.stopLoading();
86
+  }
87
+
82
   render() {
88
   render() {
83
     const { height, script } = this.state;
89
     const { height, script } = this.state;
84
     const {
90
     const {
107
         ]}
113
         ]}
108
       >
114
       >
109
         <WebView
115
         <WebView
116
+          ref={this.getWebView}
110
           onError={onError}
117
           onError={onError}
111
           onLoad={onLoad}
118
           onLoad={onLoad}
112
           onLoadStart={onLoadStart}
119
           onLoadStart={onLoadStart}