浏览代码

add getRenderSize to common; add onNavigationStateChange to index.ios/index.android

iou90 6 年前
父节点
当前提交
b5d2ee6ab1
共有 3 个文件被更改,包括 26 次插入12 次删除
  1. 7
    0
      autoHeightWebView/common.js
  2. 12
    10
      autoHeightWebView/index.android.js
  3. 7
    2
      autoHeightWebView/index.ios.js

+ 7
- 0
autoHeightWebView/common.js 查看文件

135
   };
135
   };
136
 }
136
 }
137
 `;
137
 `;
138
+
139
+export function getRenderSize(enableAnimation, height, width, heightOffset, heightValue, widthValue) {
140
+  return {
141
+    height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
142
+    width: enableAnimation ? widthValue : width
143
+  }
144
+}

+ 12
- 10
autoHeightWebView/index.android.js 查看文件

25
   getWidth,
25
   getWidth,
26
   getScript,
26
   getScript,
27
   domMutationObserveScript,
27
   domMutationObserveScript,
28
-  getCurrentSize
28
+  getCurrentSize,
29
+  getRenderSize
29
 } from './common.js';
30
 } from './common.js';
30
 
31
 
31
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
32
 const RCTAutoHeightWebView = requireNativeComponent('RCTAutoHeightWebView', AutoHeightWebView, {
47
 
48
 
48
 export default class AutoHeightWebView extends PureComponent {
49
 export default class AutoHeightWebView extends PureComponent {
49
   static propTypes = {
50
   static propTypes = {
51
+    onNavigationStateChange: PropTypes.func,
50
     onMessage: PropTypes.func,
52
     onMessage: PropTypes.func,
51
     scrollEnabled: PropTypes.bool,
53
     scrollEnabled: PropTypes.bool,
52
     source: WebView.propTypes.source,
54
     source: WebView.propTypes.source,
59
     scalesPageToFit: PropTypes.bool,
61
     scalesPageToFit: PropTypes.bool,
60
     // only works on enable animation
62
     // only works on enable animation
61
     animationDuration: PropTypes.number,
63
     animationDuration: PropTypes.number,
64
+    // only on android
62
     animationEasing: PropTypes.func,
65
     animationEasing: PropTypes.func,
63
     // offset of rn webView margin
66
     // offset of rn webView margin
64
     heightOffset: PropTypes.number,
67
     heightOffset: PropTypes.number,
95
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
98
     isBelowKitKat && DeviceEventEmitter.addListener('webViewBridgeMessage', this.listenWebViewBridgeMessage);
96
     this.finishInterval = true;
99
     this.finishInterval = true;
97
     const initWidth = getWidth(style);
100
     const initWidth = getWidth(style);
98
-    const height = style ? (style.height ? style.height : 0) : 0;
101
+    const initHeight = style ? (style.height ? style.height : 0) : 0;
99
     let state = {
102
     let state = {
100
       isSizeChanged: false,
103
       isSizeChanged: false,
101
       isSizeMayChange: false,
104
       isSizeMayChange: false,
102
-      height: height,
105
+      height: initHeight,
103
       width: initWidth,
106
       width: initWidth,
104
       script: getScript(props, getBaseScript),
107
       script: getScript(props, getBaseScript),
105
       source: enableBaseUrl ? Object.assign({}, source, { baseUrl }) : source
108
       source: enableBaseUrl ? Object.assign({}, source, { baseUrl }) : source
106
     };
109
     };
107
     if (enableAnimation) {
110
     if (enableAnimation) {
108
       Object.assign(state, {
111
       Object.assign(state, {
109
-        heightValue: new Animated.Value(height + heightOffset),
112
+        heightValue: new Animated.Value(initHeight + heightOffset),
110
         widthValue: new Animated.Value(initWidth)
113
         widthValue: new Animated.Value(initWidth)
111
       });
114
       });
112
     }
115
     }
231
   };
234
   };
232
 
235
 
233
   onLoadingStart = event => {
236
   onLoadingStart = event => {
234
-    const { onLoadStart } = this.props;
237
+    const { onLoadStart, onNavigationStateChange } = this.props;
235
     onLoadStart && onLoadStart(event);
238
     onLoadStart && onLoadStart(event);
239
+    onNavigationStateChange && onNavigationStateChange(event.nativeEvent);
236
   };
240
   };
237
 
241
 
238
   onLoadingError = event => {
242
   onLoadingError = event => {
243
   };
247
   };
244
 
248
 
245
   onLoadingFinish = event => {
249
   onLoadingFinish = event => {
246
-    const { onLoad, onLoadEnd } = this.props;
250
+    const { onLoad, onLoadEnd, onNavigationStateChange } = this.props;
247
     onLoad && onLoad(event);
251
     onLoad && onLoad(event);
248
     onLoadEnd && onLoadEnd(event);
252
     onLoadEnd && onLoadEnd(event);
253
+    onNavigationStateChange && onNavigationStateChange(event.nativeEvent);
249
   };
254
   };
250
 
255
 
251
   stopLoading() {
256
   stopLoading() {
265
       <Animated.View
270
       <Animated.View
266
         style={[
271
         style={[
267
           styles.container,
272
           styles.container,
268
-          {
269
-            height: enableAnimation ? heightValue : height ? height + heightOffset : 0,
270
-            width: enableAnimation ? widthValue : width
271
-          },
273
+          getRenderSize(enableAnimation, height, width, heightOffset, heightValue, widthValue),
272
           style
274
           style
273
         ]}
275
         ]}
274
       >
276
       >

+ 7
- 2
autoHeightWebView/index.ios.js 查看文件

2
 
2
 
3
 import React, { PureComponent } from 'react';
3
 import React, { PureComponent } from 'react';
4
 
4
 
5
-import { Animated, StyleSheet, ViewPropTypes, WebView } from 'react-native';
5
+import { Animated, Easing, StyleSheet, ViewPropTypes, WebView } from 'react-native';
6
 
6
 
7
 import PropTypes from 'prop-types';
7
 import PropTypes from 'prop-types';
8
 
8
 
13
   isSizeChanged,
13
   isSizeChanged,
14
   handleSizeUpdated,
14
   handleSizeUpdated,
15
   domMutationObserveScript,
15
   domMutationObserveScript,
16
-  getCurrentSize
16
+  getCurrentSize,
17
+  getRenderSize
17
 } from './common.js';
18
 } from './common.js';
18
 
19
 
19
 import momoize from './momoize';
20
 import momoize from './momoize';
21
 export default class AutoHeightWebView extends PureComponent {
22
 export default class AutoHeightWebView extends PureComponent {
22
   static propTypes = {
23
   static propTypes = {
23
     hasIframe: PropTypes.bool,
24
     hasIframe: PropTypes.bool,
25
+    onNavigationStateChange: PropTypes.func,
24
     onMessage: PropTypes.func,
26
     onMessage: PropTypes.func,
25
     source: WebView.propTypes.source,
27
     source: WebView.propTypes.source,
26
     customScript: PropTypes.string,
28
     customScript: PropTypes.string,
107
 
109
 
108
   handleNavigationStateChange = navState => {
110
   handleNavigationStateChange = navState => {
109
     const { title } = navState;
111
     const { title } = navState;
112
+    const { onNavigationStateChange } = this.props;
110
     if (!title) {
113
     if (!title) {
114
+      onNavigationStateChange && onNavigationStateChange();
111
       return;
115
       return;
112
     }
116
     }
113
     const [heightValue, widthValue] = title.split(',');
117
     const [heightValue, widthValue] = title.split(',');
122
         width
126
         width
123
       });
127
       });
124
     }
128
     }
129
+    onNavigationStateChange && onNavigationStateChange();
125
   };
130
   };
126
 
131
 
127
   stopLoading() {
132
   stopLoading() {