- 跨平台,learn once, write anywhere
- 代码复用性 一个编写的好的项目,android和ios代码复用性在85%-95%
- 开发效率快
- 支持热更新
- 较同类框架weex相比,学习成本低,开源库比较多
- 不需要webview内嵌H5的开发形式,而是通过javaScriptCore调用原生代码,性能更佳
- 学习成本相对较高
- 随着业务增长,模块增加,性能会遇到瓶颈,需要对RN资源包进行拆分
- 最好需要一台Mac电脑
- 全项目采用RN开发,复杂度低 适用于中小型app
- 原生与RN混编,复杂度高 适用于规模比较大的项目
通过js编写RN界面,使用前端的nodejs的npm工具打包RN开发出来的模块,生成bundle文件,预先存放到原生指定的目录,原生层面在RN引擎初始化时载入并读取bundle并进行渲染
介绍Demo版的集成RN的伙伴app
- 实现原生与RN混编
- 界面备份机制
- 组件编写和扩展
- 去除重复功能的第三方库,采用RN自带的库,如图片加载
- 掌握RN生命周期
- 掌握基于ES6标准的js语法
- 搞清楚RN组件之间通信机制
- 阅读核心源码
- 明白RN与web网页的区别
- 最好能之前使用过Reactjs或vuejs
- 搞清楚RN组件之间通信机制
- 阅读bundle打包运作机制
- 最好能学习Reat全家桶,如:Redux,Reactjs
- 打bundle包 react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/com/app/src/main/res/
- 生成安装包 ./gradlew installRelease ./gradlew assembleRelease
- 早期通过java反射实现
- 微软的code push支持
- 搭建私有云服务器实现热更新
- code-push 操作命令
- 安装并执行code-push-server命令 全局安装路径在/usr/local/lib/node_modules/code-push-server
- 注册code-push账号,如是私有云服务器则需要安装mysql和导入数据库相关表
- 登陆账号 code-push login http://127.0.0.1:3000
- 添加Android和应用,会生成生产和开发环境的key code-push app add Android4RN-android
- 重新编译bundle并发布bundle code-push release-react Android4RN-android android -d Production
- react-native-blur
- react-native-swiper
- react-native-parabolic
- react-native-vector-icons
- react-native-tab-navigator
- react-native-scrollable-tab-view
code-push-server
- npm install ...
- react-native link ...
- react-native unlink ...
- $ npm init
- $ npm install --save react
- $ npm install --save react-native
- $ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
- $ adb reverse tcp:8081 tcp:8081
- $ 启动npm start
- $ Dev Settings设置192.168.50.50:8081
- $ npm run android-release 生成android热更新包
- 查看RN版本号react-native --version
- 版本更新参考https://facebook.github.io/react-native/docs/upgrading.html
- 全局安装npm install -g react-native-git-upgrade
- 安装最新的RN版本react-native-git-upgrade