React Native：WebView加載靜態本地文件

我目前使用WebView使用require加載靜態頁面。但該HTML文件包含一些圖像，CSS，JS文件。它仍然適用於Android，ios調試器，但不適用於真實設備。React Native：WebView加載靜態本地文件

如何爲發佈的應用程序捆綁所有資源文件以及它們將位於何處？我想要一個像{uri: 'file://.../index.html'}

我不想上傳文件到在線服務器，它只是一個靜態頁面，我希望我的應用程序可以運行，而無需連接到互聯網。

來源

2017-01-26 Viet Phan

-1

好吧......我最終以ios結尾，很難獲得文件index.html的URI路徑。但我找到了替代解決方案。

對於Android，只需將文件複製到android/app/src/main/assets即可。例如：

文件android/app/src/main/assets/web/index.html將具有 URI路徑是file:///android_asset/web/index.html。

對於ios來說，這並不像Android那麼簡單。我已經使用名爲react-native-fs的第三方庫。

我們需要使用Xcode將靜態文件/文件夾複製到ios項目。
使用反應母語-FS列出在主束中的所有文件/文件夾，並將其篩選：Example Code

這是我的代碼爲iOS獲得的web/index.html URI路徑：

if (Platform.OS === 'ios') { 
     const results = await RNFS.readDir(RNFS.MainBundlePath); 
     const webFolder = results.filter(f => f.name == 'web'); 
     this.setState({fireworkURI: 'file://' + webFolder[0].path + '/index.html'}) 
    }

另一個方法是將靜態文件夾作爲http服務器，這種方法編程起來會更容易，但我不喜歡它，因爲性能低下。對於任何對此方法感興趣的人，請看react-native-httpserver

來源

2017-01-27 20:35:24

此解決方案不適用於Android上的React Native 0.44。 – Rai

@Rai你可以試試react-native-fs替代 –

React Native：WebView加載靜態本地文件

回答

相關問題