Browse Source

修复自动高度无效

zhangchao 4 years ago
parent
commit
0d99143813
1 changed files with 32 additions and 48 deletions
  1. 32
    48
      autoHeightWebView/index.js

+ 32
- 48
autoHeightWebView/index.js View File

1
-'use strict';
2
-
3
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
1
 import React, { useState, useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
4
 
2
 
5
-import { StyleSheet, Platform, ViewPropTypes } from 'react-native';
3
+import { Platform, ViewPropTypes, View } from 'react-native';
6
 
4
 
7
 import PropTypes from 'prop-types';
5
 import PropTypes from 'prop-types';
8
 
6
 
18
       return null;
16
       return null;
19
     }
17
     }
20
 
18
 
21
-    let webView = useRef();
19
+    const webView = useRef();
22
     useImperativeHandle(ref, () => ({
20
     useImperativeHandle(ref, () => ({
23
       stopLoading: () => webView.current.stopLoading(),
21
       stopLoading: () => webView.current.stopLoading(),
24
       goForward: () => webView.current.goForward(),
22
       goForward: () => webView.current.goForward(),
25
       goBack: () => webView.current.goBack(),
23
       goBack: () => webView.current.goBack(),
26
       reload: () => webView.current.reload(),
24
       reload: () => webView.current.reload(),
27
-      injectJavaScript: script => webView.current.injectJavaScript(script)
25
+      injectJavaScript: script => webView.current.injectJavaScript(script),
28
     }));
26
     }));
29
 
27
 
30
     const [size, setSize] = useState({
28
     const [size, setSize] = useState({
31
       height: style && style.height ? style.height : 0,
29
       height: style && style.height ? style.height : 0,
32
-      width: getWidth(style)
30
+      width: getWidth(style),
33
     });
31
     });
34
     const [scrollable, setScrollable] = useState(false);
32
     const [scrollable, setScrollable] = useState(false);
35
-    const handleMessage = event => {
33
+    const handleMessage = (event) => {
36
       onMessage && onMessage(event);
34
       onMessage && onMessage(event);
37
       if (!event.nativeEvent) {
35
       if (!event.nativeEvent) {
38
         return;
36
         return;
48
       const { height, width, zoomedin } = data;
46
       const { height, width, zoomedin } = data;
49
       !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
47
       !scrollEnabled && scrollEnabledWithZoomedin && setScrollable(!!zoomedin);
50
       const { height: previousHeight, width: previousWidth } = size;
48
       const { height: previousHeight, width: previousWidth } = size;
51
-      isSizeChanged({ height, previousHeight, width, previousWidth }) &&
52
-        setSize({
49
+      isSizeChanged({ height, previousHeight, width, previousWidth })
50
+        && setSize({
53
           height,
51
           height,
54
-          width
52
+          width,
55
         });
53
         });
56
     };
54
     };
57
 
55
 
61
 
59
 
62
     const { width, height } = size;
60
     const { width, height } = size;
63
     useEffect(
61
     useEffect(
64
-      () =>
65
-        onSizeUpdated &&
66
-        onSizeUpdated({
62
+      () => onSizeUpdated
63
+        && onSizeUpdated({
67
           height,
64
           height,
68
-          width
65
+          width,
69
         }),
66
         }),
70
       [width, height, onSizeUpdated]
67
       [width, height, onSizeUpdated]
71
     );
68
     );
72
-
73
     return (
69
     return (
74
-      <WebView
75
-        useWebKit={false}
76
-        {...props}
77
-        ref={webView}
78
-        onMessage={handleMessage}
79
-        style={[
80
-          styles.webView,
81
-          {
82
-            width,
83
-            height
84
-          },
85
-          style
86
-        ]}
87
-        injectedJavaScript={script}
88
-        source={currentSource}
89
-        scrollEnabled={currentScrollEnabled}
90
-      />
70
+      <View style={[props.style, { height: height || 50 }]}>
71
+        <WebView
72
+          {...props}
73
+          style={{}}
74
+          ref={webView}
75
+          onMessage={handleMessage}
76
+          injectedJavaScript={script}
77
+          source={currentSource}
78
+          scrollEnabled={currentScrollEnabled}
79
+        />
80
+      </View>
91
     );
81
     );
92
   }),
82
   }),
93
   (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
83
   (prevProps, nextProps) => !shouldUpdate({ prevProps, nextProps })
99
     PropTypes.shape({
89
     PropTypes.shape({
100
       href: PropTypes.string,
90
       href: PropTypes.string,
101
       type: PropTypes.string,
91
       type: PropTypes.string,
102
-      rel: PropTypes.string
92
+      rel: PropTypes.string,
103
     })
93
     })
104
   ),
94
   ),
105
   style: ViewPropTypes.style,
95
   style: ViewPropTypes.style,
111
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
101
   originWhitelist: PropTypes.arrayOf(PropTypes.string),
112
   onMessage: PropTypes.func,
102
   onMessage: PropTypes.func,
113
   scalesPageToFit: PropTypes.bool,
103
   scalesPageToFit: PropTypes.bool,
114
-  source: PropTypes.object
104
+  source: PropTypes.object,
115
 };
105
 };
116
 
106
 
117
-let defaultProps = {
107
+const defaultProps = {
118
   showsVerticalScrollIndicator: false,
108
   showsVerticalScrollIndicator: false,
119
   showsHorizontalScrollIndicator: false,
109
   showsHorizontalScrollIndicator: false,
120
-  originWhitelist: ['*']
110
+  originWhitelist: ['*'],
121
 };
111
 };
122
 
112
 
123
-Platform.OS === 'android' &&
124
-  Object.assign(defaultProps, {
125
-    scalesPageToFit: false
113
+Platform.OS === 'android'
114
+  && Object.assign(defaultProps, {
115
+    scalesPageToFit: false,
126
   });
116
   });
127
 
117
 
128
-Platform.OS === 'ios' &&
129
-  Object.assign(defaultProps, {
130
-    viewportContent: 'width=device-width'
118
+Platform.OS === 'ios'
119
+  && Object.assign(defaultProps, {
120
+    viewportContent: 'width=device-width',
131
   });
121
   });
132
 
122
 
133
 AutoHeightWebView.defaultProps = defaultProps;
123
 AutoHeightWebView.defaultProps = defaultProps;
134
 
124
 
135
-const styles = StyleSheet.create({
136
-  webView: {
137
-    backgroundColor: 'transparent'
138
-  }
139
-});
140
-
141
 export default AutoHeightWebView;
125
 export default AutoHeightWebView;