iou90 5 лет назад
Родитель
Сommit
580dad23d3
1 измененных файлов: 22 добавлений и 7 удалений
  1. 22
    7
      README.md

+ 22
- 7
README.md Просмотреть файл

@@ -1,11 +1,15 @@
1 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 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 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 14
 `npm install react-native-autoheight-webview@0.3.1 --save` (0.44 <= rn < 0.47)
11 15
 
@@ -13,18 +17,24 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
13 17
 
14 18
 ## android
15 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 25
 ## showcase
18 26
 ![react-native-autoheight-webview ios](https://media.giphy.com/media/l4FGyhnvWfUgxCfe0/200w.gif)&nbsp;
19 27
 ![react-native-autoheight-webview android](https://media.giphy.com/media/xUPGcIO0a1ggESelfq/200w.gif)
20 28
 
21
-# usage
29
+## usage
22 30
 
23 31
 ```javascript
24 32
 <AutoHeightWebView
25
-    scrollEnabled: PropTypes.bool,
33
+    onMessage={e => console.log(e)},
26 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 38
     // if page contains iframe on iOS, use a specific script for it
29 39
     hasIframe={true}
30 40
     /*
@@ -43,6 +53,8 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
43 53
     enableAnimation={true},
44 54
     // only works on enable animation
45 55
     animationDuration={255},
56
+    // only on android for animating size
57
+    animationEasing={Easing.ease()},
46 58
     // or uri
47 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 60
     // use local or remote files
@@ -51,13 +63,13 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
51 63
         type: 'text/css',
52 64
         rel: 'stylesheet'
53 65
     }]}
54
-    // change script (have to change source to reload on android)
55 66
     customScript={`document.body.style.background = 'lightyellow';`}
56 67
     // rn WebView callbacks
57 68
     onError={() => console.log('on error')}
58 69
     onLoad={() => console.log('on load')}
59 70
     onLoadStart={() => console.log('on load start')}
60 71
     onLoadEnd={() => console.log('on load end')}
72
+    onNavigationStateChange={() => console.log('navigation state changed')}
61 73
     // only on iOS
62 74
     onShouldStartLoadWithRequest={result => {
63 75
       console.log(result)
@@ -73,4 +85,7 @@ Cause of moving View.propTypes to ViewPropTypes in React Naitve 0.44 (https://gi
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).