一、创建项目
目前创建项目习惯使用命令形式创建
npx react-native init AwesomeProject --skip-install
或者。 npx react-native init AwesomeProject
创建项目的过程中,可能存在无法拉包情况,则需要切换数据源
npm set registry https://registry.npm.taobao.org
其余数据源:https://repo.huaweicloud.com/repository/npm
二、引入第三方插件
npm install react-native-webview —save &&。 nom install —save react-native-webview
两种方式均可使用。其中包含webview、adjust、asyncStorages、cryptoJs等;
根据实际开发要求引入第三方插件(如:横竖屏切换插件:react-native-orientation)
三、代码编写
1、初始化adjust
并且存储渠道来源
2、异步网络请求
并判断需要进入的页面,并加载H5;其中handle Result则是进行解密操作,如下:
3、JS注入与回调
其中JS注入是需要在初始化Web View的时候,通过injected JavaScript参数写入:
其中解决了跨域问题,仅需要开启开关;回调代码:
回调代码是通过赋值参数,然后通过初始化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