Bladeren bron

remove baseUrl prop

iou90kant 5 jaren geleden
bovenliggende
commit
50211735af
2 gewijzigde bestanden met toevoegingen van 17 en 18 verwijderingen
  1. 14
    12
      autoHeightWebView/index.js
  2. 3
    6
      autoHeightWebView/utils.js

+ 14
- 12
autoHeightWebView/index.js Bestand weergeven

@@ -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
   });

+ 3
- 6
autoHeightWebView/utils.js Bestand weergeven

@@ -117,16 +117,13 @@ export const isSizeChanged = ({ height, previousHeight, width, previousWidth })
117 117
 };
118 118
 
119 119
 export const reduceData = props => {
120
-  const { source, baseUrl } = props;
120
+  const { source } = props;
121 121
   const script = getScript(props);
122
-  let currentSource = baseUrl ? { baseUrl } : {};
123 122
   if (source.html) {
124
-    Object.assign(currentSource, { html: getInjectedSource({ html: source.html, script }) });
125
-    return { currentSource };
123
+    return { currentSource: { html: getInjectedSource({ html: source.html, script }) } };
126 124
   } else {
127
-    Object.assign(currentSource, source);
128 125
     return {
129
-      currentSource,
126
+      currentSource: source,
130 127
       script
131 128
     };
132 129
   }