|
@@ -47,6 +47,42 @@ const { RNCWKWebViewManager, RNCUIWebViewManager } = NativeModules;
|
47
|
47
|
|
48
|
48
|
const BGWASH = 'rgba(255,255,255,0.8)';
|
49
|
49
|
|
|
50
|
+const styles = StyleSheet.create({
|
|
51
|
+ container: {
|
|
52
|
+ flex: 1,
|
|
53
|
+ },
|
|
54
|
+ errorContainer: {
|
|
55
|
+ flex: 1,
|
|
56
|
+ justifyContent: 'center',
|
|
57
|
+ alignItems: 'center',
|
|
58
|
+ backgroundColor: BGWASH,
|
|
59
|
+ },
|
|
60
|
+ errorText: {
|
|
61
|
+ fontSize: 14,
|
|
62
|
+ textAlign: 'center',
|
|
63
|
+ marginBottom: 2,
|
|
64
|
+ },
|
|
65
|
+ errorTextTitle: {
|
|
66
|
+ fontSize: 15,
|
|
67
|
+ fontWeight: '500',
|
|
68
|
+ marginBottom: 10,
|
|
69
|
+ },
|
|
70
|
+ hidden: {
|
|
71
|
+ height: 0,
|
|
72
|
+ flex: 0, // disable 'flex:1' when hiding a View
|
|
73
|
+ },
|
|
74
|
+ loadingView: {
|
|
75
|
+ backgroundColor: BGWASH,
|
|
76
|
+ flex: 1,
|
|
77
|
+ justifyContent: 'center',
|
|
78
|
+ alignItems: 'center',
|
|
79
|
+ height: 100,
|
|
80
|
+ },
|
|
81
|
+ webView: {
|
|
82
|
+ backgroundColor: '#ffffff',
|
|
83
|
+ },
|
|
84
|
+});
|
|
85
|
+
|
50
|
86
|
enum WebViewState {
|
51
|
87
|
IDLE = 'IDLE',
|
52
|
88
|
LOADING = 'LOADING',
|
|
@@ -135,7 +171,8 @@ export default class WebView extends React.Component<
|
135
|
171
|
|
136
|
172
|
webViewRef = React.createRef<React.ComponentClass>();
|
137
|
173
|
|
138
|
|
- UNSAFE_componentWillMount() {
|
|
174
|
+ // eslint-disable-next-line camelcase, react/sort-comp
|
|
175
|
+ UNSAFE_componentWillMount(): void {
|
139
|
176
|
if (
|
140
|
177
|
this.props.useWebKit === true
|
141
|
178
|
&& this.props.scalesPageToFit !== undefined
|
|
@@ -154,19 +191,20 @@ export default class WebView extends React.Component<
|
154
|
191
|
}
|
155
|
192
|
}
|
156
|
193
|
|
157
|
|
- _getCommands(): {
|
158
|
|
- goForward: () => void;
|
159
|
|
- goBack: () => void;
|
160
|
|
- reload: () => void;
|
161
|
|
- stopLoading: () => void;
|
162
|
|
- postMessage: () => void;
|
163
|
|
- injectJavaScript: () => void;
|
164
|
|
- } {
|
165
|
|
- if (!this.props.useWebKit) {
|
166
|
|
- return UIManager.RNCUIWebView.Commands;
|
|
194
|
+ componentDidUpdate(prevProps: WebViewSharedProps): void {
|
|
195
|
+ if (!(prevProps.useWebKit && this.props.useWebKit)) {
|
|
196
|
+ return;
|
167
|
197
|
}
|
168
|
198
|
|
169
|
|
- return UIManager.RNCWKWebView.Commands;
|
|
199
|
+ this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
|
|
200
|
+ this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
|
|
201
|
+ this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
|
|
202
|
+
|
|
203
|
+ if (this.props.scalesPageToFit !== undefined) {
|
|
204
|
+ console.warn(
|
|
205
|
+ 'The scalesPageToFit property is not supported when useWebKit = true',
|
|
206
|
+ );
|
|
207
|
+ }
|
170
|
208
|
}
|
171
|
209
|
|
172
|
210
|
/**
|
|
@@ -180,6 +218,21 @@ export default class WebView extends React.Component<
|
180
|
218
|
);
|
181
|
219
|
};
|
182
|
220
|
|
|
221
|
+ _getCommands(): {
|
|
222
|
+ goForward: () => void;
|
|
223
|
+ goBack: () => void;
|
|
224
|
+ reload: () => void;
|
|
225
|
+ stopLoading: () => void;
|
|
226
|
+ postMessage: () => void;
|
|
227
|
+ injectJavaScript: () => void;
|
|
228
|
+ } {
|
|
229
|
+ if (!this.props.useWebKit) {
|
|
230
|
+ return UIManager.RNCUIWebView.Commands;
|
|
231
|
+ }
|
|
232
|
+
|
|
233
|
+ return UIManager.RNCWKWebView.Commands;
|
|
234
|
+ }
|
|
235
|
+
|
183
|
236
|
/**
|
184
|
237
|
* Go back one page in the web view's history.
|
185
|
238
|
*/
|
|
@@ -263,16 +316,22 @@ export default class WebView extends React.Component<
|
263
|
316
|
findNodeHandle(this.webViewRef.current);
|
264
|
317
|
|
265
|
318
|
_onLoadingStart = (event: WebViewNavigationEvent): void => {
|
266
|
|
- const onLoadStart = this.props.onLoadStart;
|
267
|
|
- onLoadStart && onLoadStart(event);
|
|
319
|
+ const { onLoadStart } = this.props;
|
|
320
|
+ if (onLoadStart) {
|
|
321
|
+ onLoadStart(event);
|
|
322
|
+ }
|
268
|
323
|
this._updateNavigationState(event);
|
269
|
324
|
};
|
270
|
325
|
|
271
|
326
|
_onLoadingError = (event: WebViewErrorEvent): void => {
|
272
|
327
|
event.persist(); // persist this event because we need to store it
|
273
|
328
|
const { onError, onLoadEnd } = this.props;
|
274
|
|
- onError && onError(event);
|
275
|
|
- onLoadEnd && onLoadEnd(event);
|
|
329
|
+ if (onError) {
|
|
330
|
+ onError(event);
|
|
331
|
+ }
|
|
332
|
+ if (onLoadEnd) {
|
|
333
|
+ onLoadEnd(event);
|
|
334
|
+ }
|
276
|
335
|
console.warn('Encountered an error loading page', event.nativeEvent);
|
277
|
336
|
|
278
|
337
|
this.setState({
|
|
@@ -283,8 +342,12 @@ export default class WebView extends React.Component<
|
283
|
342
|
|
284
|
343
|
_onLoadingFinish = (event: WebViewNavigationEvent): void => {
|
285
|
344
|
const { onLoad, onLoadEnd } = this.props;
|
286
|
|
- onLoad && onLoad(event);
|
287
|
|
- onLoadEnd && onLoadEnd(event);
|
|
345
|
+ if (onLoad) {
|
|
346
|
+ onLoad(event);
|
|
347
|
+ }
|
|
348
|
+ if (onLoadEnd) {
|
|
349
|
+ onLoadEnd(event);
|
|
350
|
+ }
|
288
|
351
|
this.setState({
|
289
|
352
|
viewState: WebViewState.IDLE,
|
290
|
353
|
});
|
|
@@ -293,31 +356,19 @@ export default class WebView extends React.Component<
|
293
|
356
|
|
294
|
357
|
_onMessage = (event: WebViewMessageEvent): void => {
|
295
|
358
|
const { onMessage } = this.props;
|
296
|
|
- onMessage && onMessage(event);
|
|
359
|
+ if (onMessage) {
|
|
360
|
+ onMessage(event);
|
|
361
|
+ }
|
297
|
362
|
};
|
298
|
363
|
|
299
|
364
|
_onLoadingProgress = (
|
300
|
365
|
event: NativeSyntheticEvent<WebViewProgressEvent>,
|
301
|
366
|
): void => {
|
302
|
367
|
const { onLoadProgress } = this.props;
|
303
|
|
- onLoadProgress && onLoadProgress(event);
|
304
|
|
- };
|
305
|
|
-
|
306
|
|
- componentDidUpdate(prevProps: WebViewSharedProps): void {
|
307
|
|
- if (!(prevProps.useWebKit && this.props.useWebKit)) {
|
308
|
|
- return;
|
309
|
|
- }
|
310
|
|
-
|
311
|
|
- this._showRedboxOnPropChanges(prevProps, 'allowsInlineMediaPlayback');
|
312
|
|
- this._showRedboxOnPropChanges(prevProps, 'mediaPlaybackRequiresUserAction');
|
313
|
|
- this._showRedboxOnPropChanges(prevProps, 'dataDetectorTypes');
|
314
|
|
-
|
315
|
|
- if (this.props.scalesPageToFit !== undefined) {
|
316
|
|
- console.warn(
|
317
|
|
- 'The scalesPageToFit property is not supported when useWebKit = true',
|
318
|
|
- );
|
|
368
|
+ if (onLoadProgress) {
|
|
369
|
+ onLoadProgress(event);
|
319
|
370
|
}
|
320
|
|
- }
|
|
371
|
+ };
|
321
|
372
|
|
322
|
373
|
_showRedboxOnPropChanges(
|
323
|
374
|
prevProps: WebViewSharedProps,
|
|
@@ -481,39 +532,3 @@ export default class WebView extends React.Component<
|
481
|
532
|
|
482
|
533
|
const RNCUIWebView = requireNativeComponent('RNCUIWebView');
|
483
|
534
|
const RNCWKWebView = requireNativeComponent('RNCWKWebView');
|
484
|
|
-
|
485
|
|
-const styles = StyleSheet.create({
|
486
|
|
- container: {
|
487
|
|
- flex: 1,
|
488
|
|
- },
|
489
|
|
- errorContainer: {
|
490
|
|
- flex: 1,
|
491
|
|
- justifyContent: 'center',
|
492
|
|
- alignItems: 'center',
|
493
|
|
- backgroundColor: BGWASH,
|
494
|
|
- },
|
495
|
|
- errorText: {
|
496
|
|
- fontSize: 14,
|
497
|
|
- textAlign: 'center',
|
498
|
|
- marginBottom: 2,
|
499
|
|
- },
|
500
|
|
- errorTextTitle: {
|
501
|
|
- fontSize: 15,
|
502
|
|
- fontWeight: '500',
|
503
|
|
- marginBottom: 10,
|
504
|
|
- },
|
505
|
|
- hidden: {
|
506
|
|
- height: 0,
|
507
|
|
- flex: 0, // disable 'flex:1' when hiding a View
|
508
|
|
- },
|
509
|
|
- loadingView: {
|
510
|
|
- backgroundColor: BGWASH,
|
511
|
|
- flex: 1,
|
512
|
|
- justifyContent: 'center',
|
513
|
|
- alignItems: 'center',
|
514
|
|
- height: 100,
|
515
|
|
- },
|
516
|
|
- webView: {
|
517
|
|
- backgroundColor: '#ffffff',
|
518
|
|
- },
|
519
|
|
-});
|