android 加载静态网页,React Native：如何在WebView内加载SPA或本地静态HTML页面？

React Native：如何在WebView内加载SPA或本地静态HTML页面？

React Native WebView允许你使用uri属性加载可公开访问的资源，就像程序内的一个浏览器。但是，当你要加载本地html或者SPA应用时，它并不是那么简单。

通常在APP内部接入WebView时，我们可以有两种选择，一是通过uri指向一个公开的网页地址，从而加载远程网页。二是指向一个本地的静态HTML文件路径，从而加载本地网页。两种方式各有优劣，方法一接入简单但不可离线且加载时间不可控，方法二接入复杂但可离线访问资源都在本地加载速度快。

选泽这两种接入方式需要视情况而定，当需要接入网络的资源大而多，如一些SPA应用，可以考虑使用本地接入， 若只是接入一些简单且常变的活动页时，可以考虑远程接入。 本篇文章是针对第二种本地接入方式进行分享。

目标要求

所有的静态资源如 css，js，img等都应该存储在本地。

同时支持android和ios

所有平台都从一个目录中读取文件，避免冗余。

设计方案

第一步、静态资源目录

在React Native项目根目录中添加Static.bundle文件夹。

将你的SPA应用或者本地HTML文件移动到此文件夹中。

静态资源文件夹以.bundle结尾的原因在于，iOS对于以.bundle结尾的文件夹在打包后能够保持内部的资源引用路径。

第二步、iOS静态资源设置

打开xcode项目并选中以项目名称命名的第一个文件夹，并右键添加文件