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项目并选中以项目名称命名的第一个文件夹,并右键添加文件