|
@@ -1,4 +1,5 @@
|
1
|
1
|
# react-native-autoheight-webview
|
|
2
|
+
|
2
|
3
|
An auto height webview for React Native, even auto width for inline html.
|
3
|
4
|
|
4
|
5
|
[![NPM Version](http://img.shields.io/npm/v/react-native-autoheight-webview.svg?style=flat-square)](https://www.npmjs.com/package/react-native-autoheight-webview)
|
|
@@ -35,12 +36,9 @@ import AutoHeightWebView from 'react-native-autoheight-webview'
|
35
|
36
|
`}
|
36
|
37
|
// either height or width updated will trigger this
|
37
|
38
|
onSizeUpdated={({size => console.log(size.height)})},
|
38
|
|
- // 'file:///android_asset/web/' by default on android,
|
39
|
|
- // web/' by default on iOS
|
40
|
|
- baseUrl: 'webAssets/',
|
41
|
|
- /*
|
|
39
|
+ /*
|
42
|
40
|
use local or remote files
|
43
|
|
- to add local files:
|
|
41
|
+ to add local files:
|
44
|
42
|
add baseUrl/files... to android/app/src/assets/ on android
|
45
|
43
|
add baseUrl/files... to project root on iOS
|
46
|
44
|
*/
|
|
@@ -49,21 +47,25 @@ import AutoHeightWebView from 'react-native-autoheight-webview'
|
49
|
47
|
type: 'text/css',
|
50
|
48
|
rel: 'stylesheet'
|
51
|
49
|
}]}
|
|
50
|
+ // baseUrl now contained by source
|
|
51
|
+ // 'web/' by default on iOS
|
|
52
|
+ // 'file:///android_asset/web/' by default on Android
|
52
|
53
|
// or uri
|
53
|
54
|
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>` }}
|
54
|
55
|
// disables zoom on ios (true by default)
|
55
|
56
|
zoomable={false}
|
56
|
|
- /*
|
|
57
|
+ /*
|
57
|
58
|
other react-native-webview props
|
58
|
59
|
*/
|
59
|
60
|
/>
|
60
|
61
|
```
|
61
|
62
|
|
62
|
|
-
|
63
|
63
|
## showcase
|
|
64
|
+
|
64
|
65
|
![react-native-autoheight-webview iOS](https://media.giphy.com/media/tocJYDUGCgwac0kkyB/giphy.gif)
|
65
|
66
|
![react-native-autoheight-webview Android](https://media.giphy.com/media/9JyX1wZshYIxuPklHK/giphy.gif)
|
66
|
67
|
|
67
|
68
|
## demo
|
|
69
|
+
|
68
|
70
|
You may have to use yarn to install the dependencies of the demo and remove "demo/node_modules/react-native-autoheight-webview/demo" manually, 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).
|
69
|
|
-For android, you may have to copy the "C:\Users\UserName\.android\debug.keystore" to "demo/android/app/".
|
|
71
|
+For android, you may have to copy the "C:\Users\UserName\.android\debug.keystore" to "demo/android/app/".
|