Browse Source

fix flicking issue on iOS 11; bump version to 0.3.3

iou90 7 years ago
parent
commit
f8a449c649
4 changed files with 19 additions and 8 deletions
  1. 2
    1
      README.md
  2. 15
    5
      autoHeightWebView/index.ios.js
  3. 1
    1
      demo/yarn.lock
  4. 1
    1
      package.json

+ 2
- 1
README.md View File

@@ -33,7 +33,8 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
33 33
     // offset of rn webview margin 
34 34
     heightOffset={5}
35 35
     // default width is the width of screen
36
-    style={customStyle}
36
+    // to fix that it can not select text when the length of it is not long enough on iOS, the width should be reduced more than 15
37
+    style={{ width: Dimensions.get('window').width - 15 }}
37 38
     // enable animation by default
38 39
     enableAnimation={true},
39 40
     // only works on enable animation

+ 15
- 5
autoHeightWebView/index.ios.js View File

@@ -87,7 +87,7 @@ export default class AutoHeightWebView extends PureComponent {
87 87
 
88 88
     handleNavigationStateChange(navState) {
89 89
         const height = Number(navState.title);
90
-        if (height) {
90
+        if (height && height !== this.state.height) {
91 91
             if (this.props.enableAnimation) {
92 92
                 this.opacityAnimatedValue.setValue(0);
93 93
             }
@@ -139,14 +139,24 @@ const Styles = StyleSheet.create({
139 139
     }
140 140
 });
141 141
 
142
-// note that it can not get height when there are only text objects in a html body which does not make any sense 
143 142
 const BaseScript =
144 143
     `
145
-    ; (function () {
144
+    ; 
145
+    (function () {
146 146
         var i = 0;
147
+        var height = 0;
148
+        var wrapper = document.createElement('div');
149
+        wrapper.id = 'height-wrapper';
150
+        while (document.body.firstChild) {
151
+            wrapper.appendChild(document.body.firstChild);
152
+        }
153
+        document.body.appendChild(wrapper);
147 154
         function updateHeight() {
148
-            document.title = document.body.offsetHeight;
149
-            window.location.hash = ++i;
155
+            if(document.body.offsetHeight !== height) {
156
+                height = wrapper.clientHeight;
157
+                document.title = wrapper.clientHeight;
158
+                window.location.hash = ++i;
159
+            }
150 160
         }
151 161
         updateHeight();
152 162
         window.addEventListener('load', updateHeight);

+ 1
- 1
demo/yarn.lock View File

@@ -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.2"
3244
+  version "0.3.3"
3245 3245
   dependencies:
3246 3246
     immutable "^3.8.1"
3247 3247
     prop-types "^15.5.10"

+ 1
- 1
package.json View File

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "react-native-autoheight-webview",
3
-  "version": "0.3.2",
3
+  "version": "0.3.3",
4 4
   "description": "An auto height webview for React Native",
5 5
   "main": "autoHeightWebView",
6 6
   "files": [