react-native 顯示html,react-native-webview加載本地H5

webview使用uri屬性加載html資源。

1.簡單且常變動的需求可以選擇加載遠端網頁位址

2.當需要接入的網絡資源很多，如一些獨立的web應用，可以考慮本地接入

針對本地接入方式進行記錄。

所有的靜态資源如 css，js，img等都應該存儲在本地。

同時支援android和ios

所有平台都從一個目錄中讀取檔案，避免備援。

一.RN中建立靜态資源目錄

在RN項目根目錄中建立Static.bundle檔案夾

将獨立的web應用或html檔案移動到此檔案夾中

靜态資源檔案以.bundle結尾原因是：ios對以.bundle結尾的檔案在打包後能夠保持内部的資源引用路徑

二.ios工程靜态資源引入

xcode打開ios工程後，在以項目名稱命名的第一個檔案夾，右邊後選擇Add Files to

找到第一步的Static.bundle檔案夾并添加，不要勾選Copy items if need

image.png

三.Android資源路徑設定

打開android/app/build.gradle檔案，修改如下

android {

...

sourceSets {

main {

asset.srcDirs = ['src/main/assets', '../../Static.bundle']

}

}

}

四.WebView通路本地HTML

設定HTML路徑

let source = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + `Static.bundle/index.html`;

ref={ref => (this.webViewRef = ref)}

onMessage={this.onMessage}

originWhitelist={['*']}

allowFileAccess={true}

source={{uri: source}}

javaScriptEnabled={true}

decelerationRate='normal'

scrollEnabled={true}

useWebKit={true}

mediaPlaybackRequiresUserAction={true}

mixedContentMode="compatibility"

allowingReadAccessToURL="*"

// onLoadEnd={() => this.setState({ loading: false })}

/>

接入本地HTML已大緻完成， 可在iOS和Android平台測試