Browse Source

update README

iou90 5 years ago
parent
commit
4bd1f68b2a
2 changed files with 50 additions and 40 deletions
  1. 48
    38
      README.md
  2. 2
    2
      autoHeightWebView/propTypes.js

+ 48
- 38
README.md View File

@@ -1,6 +1,10 @@
1 1
 # react-native-autoheight-webview
2 2
 An auto height webview for React Native, or even auto width for inline html.
3 3
 
4
+The Current version do not support Android API version 18 and below and the native module has been removed.
5
+
6
+Cause of javascript execution in webview is not working for Android API version 21 and below (https://github.com/facebook/react-native/issues/14754#issuecomment-361841219), auto width for inline html will not work on Android with API version 22 and below.
7
+
4 8
 Cause of changes to lifecycle methods in React 16.3.0 (https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html), please install react-native-autoheight-webview 0.6.1 for the project with 0.47 <= rn < 0.55
5 9
 
6 10
 Cause of removing unused createJSModules calls in React Naitve 0.47 (https://github.com/facebook/react-native/releases/tag/v0.47.2), please install react-native-autoheight-webview 0.3.1 for the project with 0.44 <= rn < 0.47.
@@ -16,7 +20,7 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
16 20
 `npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
17 21
 
18 22
 ## Android
19
-`react-native link react-native-autoheight-webview`
23
+`react-native link react-native-autoheight-webview` (version 0.10.6 and below)
20 24
 
21 25
 `import AutoHeightWebView from 'react-native-autoheight-webview';`
22 26
 
@@ -31,69 +35,75 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
31 35
 
32 36
 ```javascript
33 37
 <AutoHeightWebView
34
-    onMessage={e => console.log(e)},
35
-    // either height or width updated will trigger this
36
-    onSizeUpdated={({size => console.log(size.height)})},
37
-    // set scrollEnabled to true may cause some layout issues
38
-    scrollEnabled={true},
39
-    // if page contains iframe on iOS, use a specific script for it
40
-    hasIframe={true}
41
-    /*
42
-    if set to false may cause some layout issues (width of container not fit for screen) on Android
43
-    if set to true may cause some layout issues (smaller font size) on iOS
44
-    */
45
-    scalesPageToFit={Platform.OS === 'Android' ? true : false}
46
-    // offset of rn webview margin 
47
-    heightOffset={5}
48 38
     // default width is the width of screen
49 39
     // 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
50 40
     style={{ width: Dimensions.get('window').width - 15, marginTop: 35 }}
51
-    // enable animation by default
52
-    enableAnimation={true},
41
+    customScript={`document.body.style.background = 'lightyellow';`}
42
+    // add custom CSS to the page's <head>
43
+    customStyle={`
44
+      * {
45
+        font-family: 'Times New Roman';
46
+      }
47
+      p {
48
+        font-size: 16px;
49
+      }
50
+    `}
51
+    // animation enabled by default
52
+    enableAnimation={false},
53 53
     // only works on enable animation
54 54
     animationDuration={255},
55
-    // only on Android for animating size
56
-    animationEasing={Easing.ease()},
57
-    // or uri
58
-    source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
59
-    // 'web/' by default on iOS, and 'file:///android_asset/web/' on Android, and baseUrl not work in android 4.3 or below version
55
+    // offset of rn webview margin 
56
+    heightOffset={5}
57
+    onMessage={e => console.log(e)},
58
+    // either height or width updated will trigger this
59
+    // no support auto width and height will triggered by source changing only on android 5.1 or below version
60
+    onSizeUpdated={({size => console.log(size.height)})},
61
+    // 'file:///android_asset/web/' by default on android, 
62
+    // web/' by default on iOS
60 63
     baseUrl: 'webAssets/',
61
-    // add baseUrl/files... to project root
62 64
     /* 
63 65
     use local or remote files
64
-    local files only works on enable baseUrl on Android,
65
-    to add local file on Android: rnproject/android/app/src/main/assets/web/,
66
-    to add local file on iOS: open iOS project with Xcode, 
67
-    add new group named web (with folder) under your project folder, then drag your files into this folder
66
+    to add local files: 
67
+    add baseUrl/files... to android/app/src/assets/ on android
68
+    add baseUrl/files... to project root on iOS
68 69
     */
69 70
     files={[{
70 71
         href: 'cssfileaddress',
71 72
         type: 'text/css',
72 73
         rel: 'stylesheet'
73 74
     }]}
74
-    customScript={`document.body.style.background = 'lightyellow';`}
75
+    // if set to true may cause some layout issues (smaller font size) on iOS
76
+    // if set to false may cause some layout issues (width of container will be than width of screen) on android
77
+    scalesPageToFit={Platform.OS === 'Android' ? true : false}
78
+    // or uri
79
+    source={{ html: `<p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>` }}
75 80
     // rn WebView callbacks
76 81
     onError={() => console.log('on error')}
77 82
     onLoad={() => console.log('on load')}
78 83
     onLoadStart={() => console.log('on load start')}
79 84
     onLoadEnd={() => console.log('on load end')}
80 85
     onNavigationStateChange={() => console.log('navigation state changed')}
86
+    // set scrollEnabled to true may cause some layout issues
87
+    // only on iOS
88
+    scrollEnabled={true},
89
+    // if page contains iframe on iOS, use a specific script for it
90
+    // only on iOS
91
+    hasIframe={true}
81 92
     // only on iOS
82 93
     onShouldStartLoadWithRequest={result => {
83 94
       console.log(result)
84 95
       return true;
85 96
     }}
86
-    // add custom CSS to the page's <head>
87
-    customStyle={`
88
-      * {
89
-        font-family: 'Times New Roman';
90
-      }
91
-      p {
92
-        font-size: 16px;
93
-      }
94
-    `}
97
+    // only on Android for animating size (>= api 23)
98
+    animationEasing={Easing.ease()}
99
+    /* 
100
+    other rn WebView props:
101
+    renderError, mediaPlaybackRequiresUserAction, originWhitelist
102
+    decelerationRate, allowsInlineMediaPlayback, bounces, dataDetectorTypes on iOS
103
+    domStorageEnabled, thirdPartyCookiesEnabled, userAgent, geolocationEnabled, allowUniversalAccessFromFileURLs, mixedContentMode on Android
104
+    */
95 105
   />
96 106
 ```
97 107
 
98 108
 ## demo
99
-You may have to copy autoHeightWebView, android, node_modules folders to 'demo/node_modules/react-native-autoheight-webview/', cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105).
109
+You may have to copy autoHeightWebView, node_modules folders and index.js to 'demo/node_modules/react-native-autoheight-webview/', cause of installing a local package with npm will create symlink, but there is no supporting of React Native to symlink (https://github.com/facebook/watchman/issues/105).

+ 2
- 2
autoHeightWebView/propTypes.js View File

@@ -4,7 +4,6 @@ import { ViewPropTypes, WebView } from 'react-native';
4 4
 
5 5
 export const commonPropTypes = {
6 6
   style: ViewPropTypes.style,
7
-  onNavigationStateChange: PropTypes.func,
8 7
   customScript: PropTypes.string,
9 8
   customStyle: PropTypes.string,
10 9
   enableAnimation: PropTypes.bool,
@@ -13,7 +12,7 @@ export const commonPropTypes = {
13 12
   // offset of rn webView margin
14 13
   heightOffset: PropTypes.number,
15 14
   // either height or width updated will trigger this
16
-  // no support auto width and height will triggered by source changing only on android 6.0 or below version
15
+  // no support auto width and height will triggered by source changing only on android 5.1 or below version
17 16
   onSizeUpdated: PropTypes.func,
18 17
   // 'file:///android_asset/web/' by default on android, 
19 18
   // web/' by default on iOS
@@ -37,6 +36,7 @@ export const commonPropTypes = {
37 36
   renderError: PropTypes.func,
38 37
   onError: PropTypes.func,
39 38
   onMessage: PropTypes.func,
39
+  onNavigationStateChange: PropTypes.func,
40 40
   onLoad: PropTypes.func,
41 41
   onLoadStart: PropTypes.func,
42 42
   onLoadEnd: PropTypes.func