rn webview加载本地静态html,IOS开发入门之ReactNative Webview加载本地html异常问题

本文将带你了解IOS开发入门ReactNative Webview加载本地html异常问题，希望本文对大家学IOS有所帮助。

ReactNative   Webview加载本地html异常问题，本文主要解决ios发布release版本时，react native   webview加载本地html显示异常问题。

产生此问题得条件：

ios加载本地的html，且html内部包含引用外部的js链接(注：链接指向本地)，但是，如果你html所有js代码都写在了html上，那就不会下面这些问题。

eg：我的index.html文件是这样的：

原因：

ios在打包时，react   native会把所有非js的文件当作资源来处理，并不会一起打包到index.bundle.js和index.bundle.meta文件中，而你的html会被打包到assets目录下的相对路径中，通过解压ipa可以看到文件结构，如图：。

这个时候你只会看到，解压出来的目录中，html文件内加载的相对路径下的资源并没有被打包进来。这是因为react   native认识的只有html这个资源，并不认识html内部引用的其他资源链接。

解决办法

如果你没有ios的开发经验，这个时候你可能会一脸茫然(比如我)，不过你只需要了解react-native   bundle的打包机制即可，而本人是通过下面这个链接。

思路：   1、把assets链接加到你的ios工程中，具体怎么加，参考上面链接文中提到的，把assets文件夹加到工程的目录中，加入后是这样的，如下图：

2、如果你没有加的话，xcode打包后自己也会加进去，但是xcode并不会把你工程目录下的assets自己加进去，而是react   native在打包时自动生成的。eg:如下图是ipa解压出来后的目录结构：

而步骤1就是为了能把自己手动添加进assets目录的文件，在xcode编译的时候一并打包进ipa；

3、根据你在react   native工程放置的html位置，在assets生成相应的目录结构，并放置文件，如下图是我根目录后的文件路径结构：

4、xcode   archive导出ipa，把ipa解压查看目录结构，如图：

成功打包，工程和运行正常了。

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之IOS频道！