|
@@ -12,6 +12,12 @@ import { reduceData, getWidth, isSizeChanged, shouldUpdate } from './utils';
|
12
|
12
|
|
13
|
13
|
const AutoHeightWebView = React.memo(
|
14
|
14
|
forwardRef((props, ref) => {
|
|
15
|
+ const { style, onMessage, onSizeUpdated, source } = props;
|
|
16
|
+
|
|
17
|
+ if (!source) {
|
|
18
|
+ return null;
|
|
19
|
+ }
|
|
20
|
+
|
15
|
21
|
let webView = useRef();
|
16
|
22
|
useImperativeHandle(ref, () => ({
|
17
|
23
|
stopLoading: () => webView.current.stopLoading(),
|
|
@@ -21,13 +27,11 @@ const AutoHeightWebView = React.memo(
|
21
|
27
|
injectJavaScript: script => webView.current.injectJavaScript(script)
|
22
|
28
|
}));
|
23
|
29
|
|
24
|
|
- const { style, onMessage, onSizeUpdated, source, baseUrl, files, customStyle, customScript, zoomable } = props;
|
25
|
|
-
|
26
|
|
- const [size, setSize] = useState(() => ({
|
|
30
|
+ const [size, setSize] = useState({
|
27
|
31
|
height: style && style.height ? style.height : 0,
|
28
|
32
|
width: getWidth(style)
|
29
|
|
- }));
|
30
|
|
- const hanldeMessage = event => {
|
|
33
|
+ });
|
|
34
|
+ const handleMessage = event => {
|
31
|
35
|
onMessage && onMessage(event);
|
32
|
36
|
if (!event.nativeEvent) {
|
33
|
37
|
return;
|
|
@@ -49,7 +53,7 @@ const AutoHeightWebView = React.memo(
|
49
|
53
|
});
|
50
|
54
|
};
|
51
|
55
|
|
52
|
|
- const { currentSource, script } = reduceData({ source, baseUrl, files, customStyle, customScript, zoomable });
|
|
56
|
+ const { currentSource, script } = reduceData(props);
|
53
|
57
|
|
54
|
58
|
const { width, height } = size;
|
55
|
59
|
useEffect(
|
|
@@ -66,7 +70,7 @@ const AutoHeightWebView = React.memo(
|
66
|
70
|
<WebView
|
67
|
71
|
{...props}
|
68
|
72
|
ref={webView}
|
69
|
|
- onMessage={hanldeMessage}
|
|
73
|
+ onMessage={handleMessage}
|
70
|
74
|
style={[
|
71
|
75
|
styles.webView,
|
72
|
76
|
{
|
|
@@ -85,9 +89,6 @@ const AutoHeightWebView = React.memo(
|
85
|
89
|
|
86
|
90
|
AutoHeightWebView.propTypes = {
|
87
|
91
|
onSizeUpdated: PropTypes.func,
|
88
|
|
- // 'web/' by default on iOS
|
89
|
|
- // 'file:///android_asset/web/' by default on Android
|
90
|
|
- baseUrl: PropTypes.string,
|
91
|
92
|
// add baseUrl/files... to android/app/src/assets/ on android
|
92
|
93
|
// add baseUrl/files... to project root on iOS
|
93
|
94
|
files: PropTypes.arrayOf(
|
|
@@ -104,6 +105,9 @@ AutoHeightWebView.propTypes = {
|
104
|
105
|
// webview props
|
105
|
106
|
originWhitelist: PropTypes.arrayOf(PropTypes.string),
|
106
|
107
|
onMessage: PropTypes.func,
|
|
108
|
+ // baseUrl now contained by source
|
|
109
|
+ // 'web/' by default on iOS
|
|
110
|
+ // 'file:///android_asset/web/' by default on Android
|
107
|
111
|
source: PropTypes.object
|
108
|
112
|
};
|
109
|
113
|
|
|
@@ -111,13 +115,11 @@ let defaultProps = {
|
111
|
115
|
showsVerticalScrollIndicator: false,
|
112
|
116
|
showsHorizontalScrollIndicator: false,
|
113
|
117
|
originWhitelist: ['*'],
|
114
|
|
- baseUrl: 'web/',
|
115
|
118
|
zoomable: true
|
116
|
119
|
};
|
117
|
120
|
|
118
|
121
|
Platform.OS === 'android' &&
|
119
|
122
|
Object.assign(defaultProps, {
|
120
|
|
- baseUrl: 'file:///android_asset/web/',
|
121
|
123
|
// if set to true may cause some layout issues (width of container will be than width of screen) on android
|
122
|
124
|
scalesPageToFit: false
|
123
|
125
|
});
|