ReactNative Webview加载本地html异常问题

在iOS发布release版本时,React Native Webview加载本地HTML可能出现异常,主要是由于HTML引用的本地JS链接未被正确打包。解决方法包括理解RN打包机制,将assets链接添加到iOS工程中,确保HTML及其引用资源在同一目录结构下,并通过Xcode打包。遵循此方法,可以成功打包并避免加载异常。
摘要由CSDN通过智能技术生成

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


产生此问题得条件

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

  • eg:我的index.html文件是这样的:

html的body结构

原因

ios在打包时,react native会把所有非js的文件当作资源来处理,并不会一起打包到index.bundle.js和index.bundle.meta文件中,而你的html会被打包到assets目录下的相对路径中,通过解压ipa可以看到文件结构,如图:。
这个时候你只会看到,解压出来的目录中,html文件内加载的相对路径下的资源并没有被打包进来。这是因为react native

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值