React Native-H5简单开发

最新推荐文章于 2024-07-28 19:12:02 发布

AI老猴子

最新推荐文章于 2024-07-28 19:12:02 发布

阅读量518

点赞数

文章标签： react native react.js javascript android

本文链接：https://blog.csdn.net/star_nwe/article/details/133495159

版权

一、创建项目

目前创建项目习惯使用命令形式创建

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

最后

如果想要成为架构师或想突破20~30K薪资范畴，那就不要局限在编码，业务，要会选型、扩展，提升编程思维。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。

如果你没有方向，这里给大家分享一套由阿里高级架构师编写的《Android八大模块进阶笔记》，帮大家将杂乱、零散、碎片化的知识进行体系化的整理，让大家系统而高效地掌握Android开发的各个知识点。

相对于我们平时看的碎片化内容，这份笔记的知识点更系统化，更容易理解和记忆，是严格按照知识体系编排的。