|
|
@@ -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).
|
iou90
5 years ago