700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > react-native 显示html react-native-webview加载本地H5

react-native 显示html react-native-webview加载本地H5

时间:2022-09-07 17:29:36

相关推荐

react-native 显示html react-native-webview加载本地H5

webview使用uri属性加载html资源。

1.简单且常变动的需求可以选择加载远程网页地址

2.当需要接入的网络资源很多,如一些独立的web应用,可以考虑本地接入

针对本地接入方式进行记录。

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

同时支持android和ios

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

一.RN中创建静态资源目录

在RN项目根目录中创建Static.bundle文件夹

将独立的web应用或html文件移动到此文件夹中

静态资源文件以.bundle结尾原因是:ios对以.bundle结尾的文件在打包后能够保持内部的资源引用路径

二.ios工程静态资源引入

xcode打开ios工程后,在以项目名称命名的第一个文件夹,右边后选择Add Files to

找到第一步的Static.bundle文件夹并添加,不要勾选Copy items if need

image.png

三.Android资源路径设置

打开android/app/build.gradle文件,修改如下

android {

...

sourceSets {

main {

asset.srcDirs = ['src/main/assets', '../../Static.bundle']

}

}

}

四.WebView访问本地HTML

设置HTML路径

let source = (Platform.OS === 'android' ? 'file:///android_asset/' : '') + `Static.bundle/index.html`;

ref={ref => (this.webViewRef = ref)}

onMessage={this.onMessage}

originWhitelist={['*']}

allowFileAccess={true}

source={{uri: source}}

javaScriptEnabled={true}

decelerationRate='normal'

scrollEnabled={true}

useWebKit={true}

mediaPlaybackRequiresUserAction={true}

mixedContentMode="compatibility"

allowingReadAccessToURL="*"

// onLoadEnd={() => this.setState({ loading: false })}

/>

接入本地HTML已大致完成, 可在iOS和Android平台测试

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。