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

I'm currently using WebView to load a static page using require. But that html file includes some images, css, js files in it. It still works on Android, ios debugger, but doesn't work on real device.

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

How can I bundle all resource files for released app and what path will they be located? I want a path like {uri: 'file://.../index.html'}

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

I don't want to upload file to online server, it just a static page, I want my app can run without connecting to internet.

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

1 个解决方案

#1

-1

Okay... I end up with ios finally, it's so hard to get URI path of file index.html. But I found out alternative solution.

好的......最后我最终得到了ios,获取文件index.html的URI路径非常困难。但我找到了替代解决方案。

For Android, just copy file to android/app/src/main/assets. Example:

对于Android,只需将文件复制到android / app / src / main / assets。例:

File android/app/src/main/assets/web/index.html will have URI path is file:///android_asset/web/index.html.

文件android / app / src / main / assets / web / index.html的URI路径为file:///android_asset/web/index.html。

For ios, it's not easy like Android. I have used third-party library named react-native-fs.

对于ios来说,它不像Android那么容易。我使用了名为react-native-fs的第三方库。

We need to copy static file/folder to ios project using Xcode.

我们需要使用Xcode将静态文件/文件夹复制到ios项目。

Use react-native-fs to list all files/folders in main bundle and filter them: Example Code

使用react-native-fs列出主bundle中的所有文件/文件夹并对其进行过滤:示例代码

This is my code for ios to get URI path of web/index.html:

这是我的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'})
    }

Another approach is serving static folder as http server, this approach will be easier for programming, but I don't like it because of low performance. For anyone interested in this approach, have a look at react-native-httpserver

另一种方法是将静态文件夹作为http服务器,这种方法将更容易编程,但我不喜欢它因为性能低。对于对此方法感兴趣的任何人,请查看react-native-httpserver

#1

-1