webview使用uri屬性加載html資源。
1.簡單且常變動的需求可以選擇加載遠程網(wǎng)頁地址
2.當(dāng)需要接入的網(wǎng)絡(luò)資源很多，如一些獨立的web應(yīng)用，可以考慮本地接入

• 針對本地接入方式進行記錄。
• 所有的靜態(tài)資源如 css，js，img等都應(yīng)該存儲在本地。
• 同時支持android和ios
• 所有平臺都從一個目錄中讀取文件，避免冗余。

一.RN中創(chuàng)建靜態(tài)資源目錄

• 在RN項目根目錄中創(chuàng)建Static.bundle文件夾
• 將獨立的web應(yīng)用或html文件移動到此文件夾中

靜態(tài)資源文件以.bundle結(jié)尾原因是：ios對以.bundle結(jié)尾的文件在打包后能夠保持內(nèi)部的資源引用路徑

二.ios工程靜態(tài)資源引入

• xcode打開ios工程后，在以項目名稱命名的第一個文件夾，右邊后選擇Add Files to

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

  
  
  image.png

三.Android資源路徑設(shè)置

• 打開android/app/build.gradle文件，修改如下

android { 
    ... 
    sourceSets { 
        main {
        asset.srcDirs = ['src/main/assets', '../../Static.bundle']
    } 
    } 
}

四.WebView訪問本地HTML

• 設(shè)置HTML路徑

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

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