React Native-H5简单开发

一、创立项目

目前创立项目习惯运用指令方法创立

npx react-native init AwesomeProject –skip-install

或许。 npx react-native init AwesomeProject

创立项目的过程中,可能存在无法拉包状况,则需要切换数据源

npm set registry registry.npm.taobao.org

其余数据源:repo.huaweicloud.com/repository/…

二、引进第三方插件

npm install react-native-webview —save &&。 nom install —save react-native-webview

两种方法均可运用。其间包括webview、adjust、asyncStorages、cryptoJs等;

根据实际开发要求引进第三方插件(如:横竖屏切换插件:react-native-orientation)

三、代码编写

1、初始化adjust

React Native-H5简单开发

而且存储途径来源

2、异步网络恳求

React Native-H5简单开发

并判断需要进入的页面,并加载H5;其间handle Result则是进行解密操作,如下:

React Native-H5简单开发

3、JS注入与回调

其间JS注入是需要在初始化Web View的时分,经过injected JavaScript参数写入:

React Native-H5简单开发

其间解决了跨域问题,仅需要开启开关;回调代码:

React Native-H5简单开发

回调代码是经过赋值参数,然后经过初始化Web View的时分传入到onMessage参数傍边进行绑定。而且H5代码经过
window.ReactNativeWebView.postMessage(JSON.stringify({type: 1, content: jsons[‘token’]}));

回调到onMessage傍边;最后加载H5页面则是经过
source={{uri: html}}
进行设置。

注:Android与IOS逻辑共同,仅加载本地H5页面的地址存在差异,与原生开发共同。
其间faceBook 经过原生代码接入的。

四、打包上架

//android打包
react-native bundle –entry-file index.js –bundle-output android/app/src/main/assets/index.android.bundle –platform android –assets-dest android/app/src/main/res/ –dev false

//iOS打包
node node_modules/react-native/local-cli/cli.js bundle –entry-file index.js –platform ios –dev false –bundle-output ./ios/bundle/index.jsbundle –assets-dest ./ios/bundle

关注公众号:Android老皮!!!欢迎大家来找我探讨交流