Selaa lähdekoodia

improve componentWillReceiveProps for index.ios.js

iou90 6 vuotta sitten
vanhempi
commit
d83aa2b404
3 muutettua tiedostoa jossa 30 lisäystä ja 17 poistoa
  1. 19
    4
      autoHeightWebView/common.js
  2. 10
    12
      autoHeightWebView/index.ios.js
  3. 1
    1
      demo/App.js

+ 19
- 4
autoHeightWebView/common.js Näytä tiedosto

@@ -62,7 +62,7 @@ function isChanged(newValue, oldValue) {
62 62
 }
63 63
 
64 64
 function getScript(props, getBaseScript, getIframeBaseScript) {
65
-  const { hasIframe, files, customStyle, customScript, style } = props;
65
+  const { hasIframe, files, customStyle, customScript, style } = getReloadRelatedData(props);
66 66
   const baseScript = getBaseScript(style);
67 67
   let script = hasIframe ? baseScript : getIframeBaseScript(style);
68 68
   script = files ? appendFilesToHead(files, baseScript) : baseScript;
@@ -71,8 +71,23 @@ function getScript(props, getBaseScript, getIframeBaseScript) {
71 71
   return script;
72 72
 }
73 73
 
74
-function needChangeSource(nextProps, props) {
75
- return nextProps && props && isChanged(getReloadRelatedData(nextProps), getReloadRelatedData(props));
74
+function getSize(nextStyle, prevStyle) {
75
+  if (!nextStyle) {
76
+    return null;
77
+  }
78
+  if (isChanged(nextStyle, prevStyle)) {
79
+    let size = null;
80
+    const { height, width } = nextStyle;
81
+    height && Object.assign(size, { height });
82
+    width && Object.assign(size, { width });
83
+    return size;
84
+  } else {
85
+    return null;
86
+  }
87
+}
88
+
89
+function isScriptChanged(nextProps, props) {
90
+  return nextProps && props && isChanged(getReloadRelatedData(nextProps), getReloadRelatedData(props));
76 91
 }
77 92
 
78 93
 function handleSizeUpdated(height, width, onSizeUpdated) {
@@ -92,4 +107,4 @@ observer.observe(document, {
92 107
 });
93 108
 `;
94 109
 
95
-export { needChangeSource, getWidth, getScript, handleSizeUpdated, domMutationObserveScript };
110
+export { getSize, isScriptChanged, getWidth, getScript, handleSizeUpdated, domMutationObserveScript };

+ 10
- 12
autoHeightWebView/index.ios.js Näytä tiedosto

@@ -6,7 +6,7 @@ import { Animated, StyleSheet, ViewPropTypes, WebView } from 'react-native';
6 6
 
7 7
 import PropTypes from 'prop-types';
8 8
 
9
-import { needChangeSource, getWidth, getScript, handleSizeUpdated, domMutationObserveScript } from './common.js';
9
+import { isScriptChanged, getSize, getWidth, getScript, handleSizeUpdated, domMutationObserveScript } from './common.js';
10 10
 
11 11
 export default class AutoHeightWebView extends PureComponent {
12 12
   static propTypes = {
@@ -53,6 +53,7 @@ export default class AutoHeightWebView extends PureComponent {
53 53
     const { enableAnimation, style } = props;
54 54
     enableAnimation && (this.opacityAnimatedValue = new Animated.Value(0));
55 55
     this.state = {
56
+      isScriptChanged: false,
56 57
       width: getWidth(style),
57 58
       height: style && style.height ? style.height : 0,
58 59
       script: getScript(props, getBaseScript, getIframeBaseScript)
@@ -60,13 +61,10 @@ export default class AutoHeightWebView extends PureComponent {
60 61
   }
61 62
 
62 63
   componentWillReceiveProps(nextProps) {
63
-    if (nextProps.style) {
64
-      const { width, height } = nextProps.style;
65
-      width && this.setState({ width });
66
-      height && this.setState({ height });
67
-    }
68
-    this.setState({ script: getScript(nextProps, getBaseScript, getIframeBaseScript) });
69
-    this.needChangeSource = needChangeSource(nextProps, this.props);
64
+    const size = getSize(nextProps, this.props);
65
+    size && this.setState(size); 
66
+    this.isScriptChanged = isScriptChanged(nextProps, this.props);
67
+    this.isScriptChanged && this.setState({ script: getScript(nextProps, getBaseScript, getIframeBaseScript) });
70 68
   }
71 69
 
72 70
   handleNavigationStateChange = navState => {
@@ -121,7 +119,7 @@ export default class AutoHeightWebView extends PureComponent {
121 119
       scrollEnabled
122 120
     } = this.props;
123 121
     let webViewSource = Object.assign({}, source, { baseUrl: 'web/' });
124
-    if (this.needChangeSource) {
122
+    if (this.isScriptChanged) {
125 123
       this.changeSourceFlag = !this.changeSourceFlag;
126 124
       webViewSource = Object.assign(webViewSource, { changeSourceFlag: this.changeSourceFlag });
127 125
     }
@@ -173,7 +171,7 @@ const commonScript = `
173 171
     window.addEventListener('resize', updateSize);
174 172
     `;
175 173
 
176
-const getSize = `
174
+const getCurrentSize = `
177 175
     function getSize(container) {
178 176
       var height = container.clientHeight || document.body.offsetHeight;
179 177
       var width = container.clientWidth || document.body.offsetWidth;
@@ -187,7 +185,7 @@ const getSize = `
187 185
 function getBaseScript(style) {
188 186
   return `
189 187
     ;
190
-    ${getSize}
188
+    ${getCurrentSize}
191 189
     (function () {
192 190
         var height = 0;
193 191
         var width = ${getWidth(style)};
@@ -214,7 +212,7 @@ function getBaseScript(style) {
214 212
 function getIframeBaseScript(style) {
215 213
   return `
216 214
     ;
217
-    ${getSize}
215
+    ${getCurrentSize}
218 216
     (function () {
219 217
         var height = 0;
220 218
         var width = ${getWidth(style)};

+ 1
- 1
demo/App.js Näytä tiedosto

@@ -124,7 +124,7 @@ export default class Explorer extends Component {
124 124
         <TouchableOpacity onPress={this.changeStyle} style={styles.button}>
125 125
           <Text>change style</Text>
126 126
         </TouchableOpacity>
127
-        <TouchableOpacity onPress={this.changeScript} style={styles.button}>
127
+        <TouchableOpacity onPress={this.changeScript} style={[styles.button, { marginBottom: 100 }]}>
128 128
           <Text>change heightScript</Text>
129 129
         </TouchableOpacity>
130 130
       </ScrollView>