Question

我目前正在使用WebView使用require加载静态页面。但该html文件中包含一些图像，css，js文件。它仍适用于Android，ios调试器，但不适用于真实设备。

如何捆绑已发布应用的所有资源文件以及它们将位于何种路径？我想要一条像{uri: 'file://.../index.html'}

这样的路径

我不想将文件上传到在线服务器，它只是一个静态页面，我希望我的应用程序无需连接到互联网即可运行。

Answer 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项目。
使用react-native-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

React Native：WebView加载静态本地文件

1 个答案: