ReactNative开发总结

RN入门必学：

• React基础
• ES6、ES7
• typescript（ts越来越火，RN也可以用ts开发）
• CSS样式

一、ReactNative简介及原理

简介

• ReactNative（简称RN）是Facebook于2015年4月开源的跨平台移动应用开发框架，支持android和ios平台。
• RN是基于开源的JavaScript库React.js来开发android和ios移动应用，一套代码实现两个平台的功能和逻辑。
• RN的优缺点

优点
（1）比原生开发更为灵活和高效，对比h5的体验更好，性能方面接近原生
（2）可以远程调试代码，热加载
（3）可以热更新，实现在线更新代码
（4）跨平台，实现一套代码跑安卓和ios移动设备
（5）React Native实现不了的，可以通过原生来实现，可以互补

缺点
（1）学习成本较高，需要懂js和原生开发基础
（2）即使是跨平台，但是不同平台的Api特性与显示可能不一致，有些组件的显示效果也是有平台方面的差异
（3）调试必须依赖于网络，如果没有网络是无法load js的代码
（4）Android上的一些兼容性问题

工作原理

RN的原理主要是将原生的UI组件和Api进行封装，通过一层JS Bridge实现JS与原生的交互通信。
RN的主要工作原理如下图所示：

image.png

通过JSX操作虚拟DOM，通过虚拟DOM来更新真实的DOM，从而更新视图UI。

二、搭建环境
RN搭建开发环境可以参考官网：
RN中文官网-搭建开发环境
三、创建demo项目
通过命令行react-native init AwesomeProject可以快速创建Demo项目，使用--version参数来指定安装的版本项目。
可以参考我的一篇博文：RN创建demo项目
目前我有创建一份Demo放到github上，基于react-navigation+redux，可以参考：
RNDemo0.59.5
四、编译运行、打包、调试
1、android编译运行要注意的是gradle的下载，有可能会下载超时，可以将相应的gradle下载到本地。

• 运行到真机摇一摇会出现下面弹框，先点击Dev Settings配置IP和端口，然后点Reload就可以加载js代码

  
  
  image.png

image.png

注意：这里的：一定要用英文的，中文的load不了代码。
2、ios的话如果使用了CocoaPods，安装可能不太顺利，具体可以参考官网的说明：
RN-搭建环境
3、打包

• android打包比较简单，主要是配置好签名，然后一条命令行即可打包。具体可以参考：
  RN-android打包apk
  注意：mac电脑在android目录下是需要加./，比如 ./gradlew assembleRelease；在window下则不用。
• ios要运行到真机或者打包需要配置证书，这个需要付费账号申请相关签名证书。
  RN-ios运行到真机

4、调试

• 可以下载调试客户端工具：react-native-debugger
• 谷歌浏览器调试代码
• 日志打印 console.log('')

五、UI布局、样式编写
RN的UI布局相对比较简单，主要去理解flex弹性布局，主轴和侧轴方向的排列方式等。可以参考以下链接：

• RN官网-布局
• React Native布局详细指南

六、路由

• RN的路由使用最多的是react-navigation，目前已更新到5.x版本了，官网有比较详细的说明。具体入门使用可以参考react-navigation使用技巧
• 还有另外一个路由组件库react-native-router-flux，它的4.x版本是基于react-navigation进行了封装，使用也相对比较方便。具体可以查看react-native-router-flux API文档，入门教程可以参考react-native-router-flux使用技巧。

image.png

七、网络请求
1、fetch请求，
可以参考我的一篇博文：RN-fetch请求封装
2、Axios
具体可以参考：react native的网络请求-axios

八、数据存储
1、RN提供的AsyncStorage异步存储
2、redux的持久化存储
3、realm数据库

九、数据流框架

• redux
• mobx
• dva