Kaynağa Gözat

add hasIframe property to support iframe on iOS; bump version to 0.3.4

iou90 7 yıl önce
ebeveyn
işleme
2449cc93a2
4 değiştirilmiş dosya ile 28 ekleme ve 6 silme
  1. 2
    0
      README.md
  2. 23
    3
      autoHeightWebView/index.ios.js
  3. 1
    1
      demo/yarn.lock
  4. 2
    2
      package.json

+ 2
- 0
README.md Dosyayı Görüntüle

@@ -23,6 +23,8 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
23 23
 ```javascript
24 24
 <AutoHeightWebView
25 25
     onHeightUpdated={height => console.log(height)},
26
+    // if page contains iframe on iOS, use a specific script for it
27
+    hasIframe={true}
26 28
     /*
27 29
     if set to false may cause some layout issues (width of container not fit for screen) on android
28 30
     if set to true may cause some layout issues (smaller font size) on ios

+ 23
- 3
autoHeightWebView/index.ios.js Dosyayı Görüntüle

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
15 15
 
16 16
 export default class AutoHeightWebView extends PureComponent {
17 17
     static propTypes = {
18
+        hasIframe: PropTypes.bool,
18 19
         source: WebView.propTypes.source,
19 20
         onHeightUpdated: PropTypes.func,
20 21
         customScript: PropTypes.string,
@@ -47,7 +48,7 @@ export default class AutoHeightWebView extends PureComponent {
47 48
         if (this.props.enableAnimation) {
48 49
             this.opacityAnimatedValue = new Animated.Value(0);
49 50
         }
50
-        const initialScript = props.files ? this.appendFilesToHead(props.files, BaseScript) : BaseScript;
51
+        const initialScript = props.files ? this.appendFilesToHead(props.files, props.hasIframe ? IframeBaseScript : BaseScript) : props.hasIframe ? IframeBaseScript : BaseScript;
51 52
         this.state = {
52 53
             height: 0,
53 54
             script: initialScript
@@ -55,9 +56,9 @@ export default class AutoHeightWebView extends PureComponent {
55 56
     }
56 57
 
57 58
     componentWillReceiveProps(nextProps) {
58
-        let currentScript = BaseScript;
59
+        let currentScript = nextProps.hasIframe ? IframeBaseScript : BaseScript;
59 60
         if (nextProps.files) {
60
-            currentScript = this.appendFilesToHead(nextProps.files, BaseScript);
61
+            currentScript = this.appendFilesToHead(nextProps.files, nextProps.hasIframe ? IframeBaseScript : BaseScript);
61 62
         }
62 63
         this.setState({ script: currentScript });
63 64
     }
@@ -162,4 +163,23 @@ const BaseScript =
162 163
         window.addEventListener('load', updateHeight);
163 164
         window.addEventListener('resize', updateHeight);
164 165
     } ());
166
+    `;
167
+
168
+const IframeBaseScript =
169
+    `
170
+    ; 
171
+    (function () {
172
+        var i = 0;
173
+        var height = 0;
174
+        function updateHeight() {
175
+            if(document.body.offsetHeight !== height) {
176
+                height = document.body.firstChild.clientHeight;
177
+                document.title = document.body.firstChild.clientHeight;
178
+                window.location.hash = ++i;
179
+            }
180
+        }
181
+        updateHeight();
182
+        window.addEventListener('load', updateHeight);
183
+        window.addEventListener('resize', updateHeight);
184
+    } ());
165 185
     `;

+ 1
- 1
demo/yarn.lock Dosyayı Görüntüle

@@ -3241,7 +3241,7 @@ react-devtools-core@2.3.1:
3241 3241
     ws "^2.0.3"
3242 3242
 
3243 3243
 react-native-autoheight-webview@../:
3244
-  version "0.3.3"
3244
+  version "0.3.4"
3245 3245
   dependencies:
3246 3246
     immutable "^3.8.1"
3247 3247
     prop-types "^15.5.10"

+ 2
- 2
package.json Dosyayı Görüntüle

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "react-native-autoheight-webview",
3
-  "version": "0.3.3",
3
+  "version": "0.3.4",
4 4
   "description": "An auto height webview for React Native",
5 5
   "main": "autoHeightWebView",
6 6
   "files": [
@@ -30,4 +30,4 @@
30 30
     "immutable": "^3.8.1",
31 31
     "prop-types": "^15.5.10"
32 32
   }
33
-}
33
+}