Browse Source

update readme

iou90 6 years ago
parent
commit
38e0a9d7dc
1 changed files with 16 additions and 9 deletions
  1. 16
    9
      README.md

+ 16
- 9
README.md View File

15
 
15
 
16
 `npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
16
 `npm install react-native-autoheight-webview@0.2.3 --save` (rn < 0.44)
17
 
17
 
18
-## android
18
+## Android
19
 `react-native link react-native-autoheight-webview`
19
 `react-native link react-native-autoheight-webview`
20
+
20
 `import AutoHeightWebView from 'react-native-autoheight-webview';`
21
 `import AutoHeightWebView from 'react-native-autoheight-webview';`
21
 
22
 
22
-## ios
23
+## iOS
23
 `import AutoHeightWebView from 'react-native-autoheight-webview';`
24
 `import AutoHeightWebView from 'react-native-autoheight-webview';`
24
 
25
 
25
 ## showcase
26
 ## showcase
26
-![react-native-autoheight-webview ios](https://media.giphy.com/media/g01cDWsKSzqLDAK8na/giphy.gif)&nbsp;
27
-![react-native-autoheight-webview android](https://media.giphy.com/media/35Dmikv0e0P5zVjTUw/giphy.gif)
27
+![react-native-autoheight-webview iOS](https://media.giphy.com/media/eehXhFjneVqEUCzYip/giphy.gif)&nbsp;
28
+![react-native-autoheight-webview Android](https://media.giphy.com/media/1yTcqipIfHbgNNfcEU/giphy.gif)
28
 
29
 
29
 ## usage
30
 ## usage
30
 
31
 
38
     // if page contains iframe on iOS, use a specific script for it
39
     // if page contains iframe on iOS, use a specific script for it
39
     hasIframe={true}
40
     hasIframe={true}
40
     /*
41
     /*
41
-    if set to false may cause some layout issues (width of container not fit for screen) on android
42
+    if set to false may cause some layout issues (width of container not fit for screen) on Android
42
     if set to true may cause some layout issues (smaller font size) on iOS
43
     if set to true may cause some layout issues (smaller font size) on iOS
43
     */
44
     */
44
-    scalesPageToFit={Platform.OS === 'android' ? true : false}
45
-    // baseUrl not work in android 4.3 or below version
45
+    scalesPageToFit={Platform.OS === 'Android' ? true : false}
46
+    // baseUrl not work in Android 4.3 or below version
46
     enableBaseUrl={true}
47
     enableBaseUrl={true}
47
     // offset of rn webview margin 
48
     // offset of rn webview margin 
48
     heightOffset={5}
49
     heightOffset={5}
53
     enableAnimation={true},
54
     enableAnimation={true},
54
     // only works on enable animation
55
     // only works on enable animation
55
     animationDuration={255},
56
     animationDuration={255},
56
-    // only on android for animating size
57
+    // only on Android for animating size
57
     animationEasing={Easing.ease()},
58
     animationEasing={Easing.ease()},
58
     // or uri
59
     // or uri
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>` }}
60
     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>` }}
60
-    // use local or remote files
61
+    /* 
62
+    use local or remote files
63
+    local files only works on enable baseUrl on Android,
64
+    to add local file on Android: rnproject/android/app/src/main/assets/web/,
65
+    to add local file on iOS: open iOS project with Xcode, 
66
+    add new group named web (with folder) under your project folder, then drag your files into this folder
67
+    */
61
     files={[{
68
     files={[{
62
         href: 'cssfileaddress',
69
         href: 'cssfileaddress',
63
         type: 'text/css',
70
         type: 'text/css',