-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
凌雪
2018-11-12
来源 ：网络
阅读 3610
评论 0
摘要：本文将带你了解IOS开发入门ReactNative Webview加载本地html异常问题，希望本文对大家学IOS有所帮助。
本文将带你了解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频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
