|
|
@@ -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
|
|
|
19
|
27
|
|
|
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).
|
iou90
6 jaren geleden