Browse Source

update Readme

iou90 4 years ago
parent
commit
feb079901b
1 changed files with 10 additions and 8 deletions
  1. 10
    8
      README.md

+ 10
- 8
README.md View File

@@ -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)&nbsp;
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/".