有些Html 引用了js一些跨域的问题，本文章为了解决在RN端加载一个本地H5的方案，该方案解决js跨域问题

1、创建一个bundle文件，将html的资源全部放进去如图：

 

2、然后将bundle文件拖到RN主工程中

3、在iOS端 将bundle文件拖入xcode项目的目录中，注意不要选copy 如图：

4、在安卓中

Android：

打开android/app/build.gradle文件，在android方法里添加如下代码

android { 

    ... 

    sourceSets { 

        main {

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

    } 

} 

}

如图：

 

 

在RN中的代码调用：

class App extends Component {

render() {

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

return (

<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='*'

/>

);

}

};

 

重点来了！！！！ 很多小伙伴最后跑起来 发现iOS端html效果还是没显示出来

这时候就需要修改一下

项目中 Pods-->Development Pods-->react-native-webview目录下，找到RNCWebView.m文件，在didMoveToWindow方法里添加如下代码：

 [wkWebViewConfig setValue:@TRUE forKey:@"allowUniversalAccessFromFileURLs"];

如图：

之后在iOS端就可以很愉快的展示出来啦，谢谢大家， 喜欢的朋友可以点个关注点个赞呦