ReactNative WebView加载本地HTML

1. 用到的属性

source:

在WebView中载入一段静态的 html 代码或是一个 url（还可以附带一些 header 选项）。注意如果是载入 html 代码，则需要设置originWhitelist，比如可以设为["*"]来允许运行本地代码。

originWhitelist:

允许导航到的原始字符串列表。这些字符串允许使用通配符，并且仅与源（而不是完整的URL）匹配。如果用户点击导航至新页面，但新页面不在此白名单中，则该URL将由操作系统处理。列入白名单的默认来源是“ http：// ”和“ https：// ”。

allowFileAccess:

用于设置是否WebView有权访问文件系统，如果为true，则将允许通过file://URI 访问文件系统。默认值为false。

2. html路径

html本地加载的路径，首先要确定的是html放在内部目录还是外部目录

内部目录:

Android/app/src/main/assets
会被打包到apk中，只能APP内部访问

外部目录:

Android/data/com.xxxxxx/files
不打包到apk中，共享目录

3. 实现代码

<WebView
	originWhitelist={'*'}
	// 必填 如果为true，则将允许通过file://URI 访问文件系统。默认值为false。
	allowFileAccess={true}
	source={{
		// 内部路径
		uri: 'file:///android_asset/index.html'
		// 外部路径
		// uri: 'file:///storage/emulated/0/Android/data/com.xxxxxx/files/index.html',
	}}
/>

同样其他的静态资源，都可以通过2个路径访问。