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平臺測試

總結

以上是生活随笔為你收集整理的react-native 显示html,react-native-webview加载本地H5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。