Browse Source

update readme

iou90 6 years ago
parent
commit
580dad23d3
1 changed files with 22 additions and 7 deletions
  1. 22
    7
      README.md

+ 22
- 7
README.md View File

1
 # react-native-autoheight-webview
1
 # react-native-autoheight-webview
2
-An auto height webview for React Native.
2
+An auto height webview for React Native, or even auto width for inline html.
3
+
4
+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
3
 
5
 
4
 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.
6
 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.
5
 
7
 
6
 Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://github.com/facebook/react-native/releases/tag/v0.44.3) and PropTypes has been moved to a separate package in React 16 (https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes), please install react-native-autoheight-webview 0.2.3 for the project with rn < 0.44.
8
 Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://github.com/facebook/react-native/releases/tag/v0.44.3) and PropTypes has been moved to a separate package in React 16 (https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes), please install react-native-autoheight-webview 0.2.3 for the project with rn < 0.44.
7
 
9
 
8
-`npm install react-native-autoheight-webview --save` (rn >= 0.47)
10
+`npm install react-native-autoheight-webview --save` (rn >= 0.56)
11
+
12
+`npm install react-native-autoheight-webview@0.6.1 --save` (0.47 <= rn < 0.56)
9
 
13
 
10
 `npm install react-native-autoheight-webview@0.3.1 --save` (0.44 <= rn < 0.47)
14
 `npm install react-native-autoheight-webview@0.3.1 --save` (0.44 <= rn < 0.47)
11
 
15
 
13
 
17
 
14
 ## android
18
 ## android
15
 `react-native link react-native-autoheight-webview`
19
 `react-native link react-native-autoheight-webview`
20
+`import AutoHeightWebView from 'react-native-autoheight-webview';`
21
+
22
+## ios
23
+`import AutoHeightWebView from 'react-native-autoheight-webview';`
16
 
24
 
17
 ## showcase
25
 ## showcase
18
 ![react-native-autoheight-webview ios](https://media.giphy.com/media/l4FGyhnvWfUgxCfe0/200w.gif)&nbsp;
26
 ![react-native-autoheight-webview ios](https://media.giphy.com/media/l4FGyhnvWfUgxCfe0/200w.gif)&nbsp;
19
 ![react-native-autoheight-webview android](https://media.giphy.com/media/xUPGcIO0a1ggESelfq/200w.gif)
27
 ![react-native-autoheight-webview android](https://media.giphy.com/media/xUPGcIO0a1ggESelfq/200w.gif)
20
 
28
 
21
-# usage
29
+## usage
22
 
30
 
23
 ```javascript
31
 ```javascript
24
 <AutoHeightWebView
32
 <AutoHeightWebView
25
-    scrollEnabled: PropTypes.bool,
33
+    onMessage={e => console.log(e)},
26
     // either height or width updated will trigger this
34
     // either height or width updated will trigger this
27
-    onSizeUpdated: PropTypes.func,
35
+    onSizeUpdated={({size => console.log(size.height)})},
36
+    // set scrollEnabled to true may cause some layout issues
37
+    scrollEnabled={true},
28
     // if page contains iframe on iOS, use a specific script for it
38
     // if page contains iframe on iOS, use a specific script for it
29
     hasIframe={true}
39
     hasIframe={true}
30
     /*
40
     /*
43
     enableAnimation={true},
53
     enableAnimation={true},
44
     // only works on enable animation
54
     // only works on enable animation
45
     animationDuration={255},
55
     animationDuration={255},
56
+    // only on android for animating size
57
+    animationEasing={Easing.ease()},
46
     // or uri
58
     // or uri
47
     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
     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>` }}
48
     // use local or remote files
60
     // use local or remote files
51
         type: 'text/css',
63
         type: 'text/css',
52
         rel: 'stylesheet'
64
         rel: 'stylesheet'
53
     }]}
65
     }]}
54
-    // change script (have to change source to reload on android)
55
     customScript={`document.body.style.background = 'lightyellow';`}
66
     customScript={`document.body.style.background = 'lightyellow';`}
56
     // rn WebView callbacks
67
     // rn WebView callbacks
57
     onError={() => console.log('on error')}
68
     onError={() => console.log('on error')}
58
     onLoad={() => console.log('on load')}
69
     onLoad={() => console.log('on load')}
59
     onLoadStart={() => console.log('on load start')}
70
     onLoadStart={() => console.log('on load start')}
60
     onLoadEnd={() => console.log('on load end')}
71
     onLoadEnd={() => console.log('on load end')}
72
+    onNavigationStateChange={() => console.log('navigation state changed')}
61
     // only on iOS
73
     // only on iOS
62
     onShouldStartLoadWithRequest={result => {
74
     onShouldStartLoadWithRequest={result => {
63
       console.log(result)
75
       console.log(result)
73
       }
85
       }
74
     `}
86
     `}
75
   />
87
   />
76
-```
88
+```
89
+
90
+## demo
91
+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).