瀏覽代碼

chore(docs): Steps to load local HTML files into the webview (#1008)

Fixes #746 

These steps are based on my other project React native draftjs which requires loading a local HTML file. The code can be found in the following line - bc51410117/index.js (L113)
Dani Akash 4 年之前
父節點
當前提交
6088dd9f06
共有 1 個檔案被更改,包括 35 行新增0 行删除
  1. 35
    0
      docs/Guide.md

+ 35
- 0
docs/Guide.md 查看文件

@@ -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.