|
@@ -8,6 +8,7 @@ _This guide is currently a work in progress._
|
8
|
8
|
|
9
|
9
|
- [Basic Inline HTML](Guide.md#basic-inline-html)
|
10
|
10
|
- [Basic URL Source](Guide.md#basic-url-source)
|
|
11
|
+- [Loading local HTML files](Guide.md#loading-local-html-files)
|
11
|
12
|
- [Controlling navigation state changes](Guide.md#controlling-navigation-state-changes)
|
12
|
13
|
- [Add support for File Upload](Guide.md#add-support-for-file-upload)
|
13
|
14
|
- [Multiple files upload](Guide.md#multiple-files-upload)
|
|
@@ -54,6 +55,40 @@ class MyWeb extends Component {
|
54
|
55
|
}
|
55
|
56
|
```
|
56
|
57
|
|
|
58
|
+### Loading local HTML files
|
|
59
|
+
|
|
60
|
+Sometimes you would have bundled an HTML file along with the app and would like to load the HTML asset into your WebView. To do this on iOS, you can just import the html file like any other asset as shown below.
|
|
61
|
+
|
|
62
|
+```js
|
|
63
|
+import React, { Component } from 'react';
|
|
64
|
+import { WebView } from 'react-native-webview';
|
|
65
|
+
|
|
66
|
+const myHtmlFile = require("./my-asset-folder/local-site.html");
|
|
67
|
+
|
|
68
|
+class MyWeb extends Component {
|
|
69
|
+ render() {
|
|
70
|
+ return (
|
|
71
|
+ <WebView source={myHtmlFile} />
|
|
72
|
+ );
|
|
73
|
+ }
|
|
74
|
+}
|
|
75
|
+```
|
|
76
|
+
|
|
77
|
+However on Android, you need to place the HTML file inside your android project's asset directory. For example, if `local-site.html` is your HTML file and you'd like to load it into the webview, you should move the file to your project's android asset directory which is `your-project/android/src/main/assets/`. Then you can load the html file as shown in the following code block
|
|
78
|
+
|
|
79
|
+```js
|
|
80
|
+import React, { Component } from 'react';
|
|
81
|
+import { WebView } from 'react-native-webview';
|
|
82
|
+
|
|
83
|
+class MyWeb extends Component {
|
|
84
|
+ render() {
|
|
85
|
+ return (
|
|
86
|
+ <WebView source={{ uri: "file:///android_asset/local-site.html" }} />
|
|
87
|
+ );
|
|
88
|
+ }
|
|
89
|
+}
|
|
90
|
+```
|
|
91
|
+
|
57
|
92
|
### Controlling navigation state changes
|
58
|
93
|
|
59
|
94
|
Sometimes you want to intercept a user tapping on a link in your webview and do something different than navigating there in the webview. Here's some example code on how you might do that using the `onNavigationStateChange` function.
|