reactNative webview怎么加载一个带有css,js等静态资源引用的h5项目?

1.问题描述

项目中会遇到我们需要嵌套前端页面进入rn工程，rn的webview引入时会遇到一个问题，按照我们平时的引入方法发现，如果是单页面的引入不会有问题,但是如果是一个带有js，css，img这样的静态引入资源时，我们会发现不是和我们想象的一样，他会加载不进来,显示的仅仅是html这个文件,那如何才能把他的静态引入正确导入我们的包里且正确显示在app呢?今天就带着大家解决这个困惑，轻松搞定静态引入h5到我们的webview里.

2.react-native-webview

首先我们需要rn的webview,

npm install react-native-webview
react-native link react-native-webview

小编这里就不详细说面这个webview了，rn的webview安装配置api请参考这里

3.rn工程根目录新建bundle文件夹

在RN项目根目录中创建static.bundle文件夹

这个bundle文件夹里放置前端的所有静态文件

4.ios部分

xcode植入静态项目

上面的步骤全部完结后,请按照下面图文操作

在xcode工程目录右键选择add files to …
之后选择

把之前建好的static.bundle选择按照上图添加到工程目录里.
ios配置完毕,非常简单

5.android部分

assets放置

android部分还是老样子把static,bundle文件全部拖到assets目录, 至于android
的assets目录小编这里就不细细讲解了，相信每个android开发者都不陌生

buildGradle 添加如下

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

6.rn webview书写如下

ios

	<WebView
        source={{uri:"static.bundle/index.html"}}
        originWhitelist={['*']}
       />

android

	<WebView
          source={{uri:"file:///android_asset/static.bundle/index.html"}}
          originWhitelist={['*']}
         />                    

到这里就可以run一下你的项目试试了,希望我的分享能帮助更多的人,求支持🙏🙏🙏

联系方式:2316744840@qq.com
欢迎大家查阅我的个人作品: lbopush-react-native（为开发这提供厂商推送接入api）