Browse Source

Add: DOM change detection, android setup guide on README

Calvin Kei 6 years ago
parent
commit
1fedd1f471
3 changed files with 51 additions and 8 deletions
  1. 17
    2
      README.md
  2. 19
    3
      autoHeightWebView/index.android.js
  3. 15
    3
      autoHeightWebView/index.ios.js

+ 17
- 2
README.md View File

12
 `npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
12
 `npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
13
 
13
 
14
 ## android
14
 ## android
15
-`react-native link react-native-autoheight-webview`
15
+1. `react-native link react-native-autoheight-webview`
16
+2. in MainApplication.java
17
+```javascript
18
+import com.dscj.autoheightwebview.AutoHeightWebViewPackage; // Add this
19
+
20
+public class MainApplication extends Application implements ReactApplication {
21
+  //...
22
+  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
23
+    //...
24
+    @Override
25
+    protected List<ReactPackage> getPackages() {
26
+      return Arrays.<ReactPackage>asList(
27
+        //...
28
+        new AutoHeightWebViewPackage() // Add this
29
+        //...
30
+```
16
 
31
 
17
 ## showcase
32
 ## showcase
18
 ![react-native-autoheight-webview ios](https://media.giphy.com/media/l4FGyhnvWfUgxCfe0/200w.gif)&nbsp;
33
 ![react-native-autoheight-webview ios](https://media.giphy.com/media/l4FGyhnvWfUgxCfe0/200w.gif)&nbsp;
32
     scalesPageToFit={Platform.OS === 'android' ? true : false}
47
     scalesPageToFit={Platform.OS === 'android' ? true : false}
33
     // baseUrl not work in android 4.3 or below version
48
     // baseUrl not work in android 4.3 or below version
34
     enableBaseUrl={true}
49
     enableBaseUrl={true}
35
-    // offset of rn webview margin 
50
+    // offset of rn webview margin
36
     heightOffset={5}
51
     heightOffset={5}
37
     // default width is the width of screen
52
     // default width is the width of screen
38
     // if there are some text selection issues on iOS, the width should be reduced more than 15 and the marginTop should be added more than 35
53
     // if there are some text selection issues on iOS, the width should be reduced more than 15 and the marginTop should be added more than 35

+ 19
- 3
autoHeightWebView/index.android.js View File

23
 const RCTAutoHeightWebView = requireNativeComponent(
23
 const RCTAutoHeightWebView = requireNativeComponent(
24
   "RCTAutoHeightWebView",
24
   "RCTAutoHeightWebView",
25
   AutoHeightWebView,
25
   AutoHeightWebView,
26
-  { nativeOnly: 
26
+  { nativeOnly:
27
     {
27
     {
28
       nativeOnly: {
28
       nativeOnly: {
29
         onLoadingStart: true,
29
         onLoadingStart: true,
343
         AutoHeightWebView.onMessage = function (message) {
343
         AutoHeightWebView.onMessage = function (message) {
344
             AutoHeightWebView.send(String(document.body.offsetHeight));
344
             AutoHeightWebView.send(String(document.body.offsetHeight));
345
         };
345
         };
346
-    } ()); 
346
+        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
347
+        var observer = new MutationObserver(function() {
348
+            AutoHeightWebView.send(String(document.body.offsetHeight));
349
+        });
350
+        observer.observe(document, {
351
+            subtree: true,
352
+            attributes: true
353
+        });
354
+    } ());
347
     `
355
     `
348
   : `
356
   : `
349
     ; (function () {
357
     ; (function () {
350
         document.addEventListener('message', function (e) {
358
         document.addEventListener('message', function (e) {
351
             window.postMessage(String(document.body.offsetHeight));
359
             window.postMessage(String(document.body.offsetHeight));
352
         });
360
         });
353
-    } ()); 
361
+        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
362
+        var observer = new MutationObserver(function() {
363
+            window.postMessage(String(document.body.offsetHeight));
364
+        });
365
+        observer.observe(document, {
366
+            subtree: true,
367
+            attributes: true
368
+        });
369
+    } ());
354
     `;
370
     `;

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

175
 
175
 
176
 const BaseScript =
176
 const BaseScript =
177
     `
177
     `
178
-    ; 
178
+    ;
179
     (function () {
179
     (function () {
180
         var i = 0;
180
         var i = 0;
181
         var height = 0;
181
         var height = 0;
195
         updateHeight();
195
         updateHeight();
196
         window.addEventListener('load', updateHeight);
196
         window.addEventListener('load', updateHeight);
197
         window.addEventListener('resize', updateHeight);
197
         window.addEventListener('resize', updateHeight);
198
+        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
199
+        var observer = new MutationObserver(updateHeight);
200
+        observer.observe(document, {
201
+            subtree: true,
202
+            attributes: true
203
+        });
198
     } ());
204
     } ());
199
     `;
205
     `;
200
 
206
 
201
 const IframeBaseScript =
207
 const IframeBaseScript =
202
     `
208
     `
203
-    ; 
209
+    ;
204
     (function () {
210
     (function () {
205
         var i = 0;
211
         var i = 0;
206
         var height = 0;
212
         var height = 0;
214
         updateHeight();
220
         updateHeight();
215
         window.addEventListener('load', updateHeight);
221
         window.addEventListener('load', updateHeight);
216
         window.addEventListener('resize', updateHeight);
222
         window.addEventListener('resize', updateHeight);
223
+        MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
224
+        var observer = new MutationObserver(updateHeight);
225
+        observer.observe(document, {
226
+            subtree: true,
227
+            attributes: true
228
+        });
217
     } ());
229
     } ());
218
-    `;
230
+    `;