ReactNative Webview加載本地html異常問題 – iPhone手機開發 iPhone軟體開發教學課程

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解壓查看目錄結構,如圖:
成功打包,工程和運行正常瞭。

發佈留言