React Native 快速了解

React Native 快速了解

什么是React Native & 为什么要用 React Native

什么是 React Native

React Native (简称RN) 是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。RN使用Javascript语言，类似于HTML的JSX，以及CSS来开发移动应用，因此熟悉Web前端开发的技术人员只需很少的学习就可以进入移动应用开发领域。
— 百度百科

为什么要用 React Native

React Native 的宗旨是：学习一次,高效编写跨平台原生应用。

使用 React Native 开发的 App 支持跨平台；即在特定的条件下，使用  React Native 开发出来的App能够同时兼容 iOS、Android 和 web 三端，也就是传说中的一套代码，三端共用。

相对于 H5 来说，React Native 在性能方面以及体验方面来说，基本上都算的上是强于 H5

所以使用 React Native 的目的是为了能够让程序员提高自我竞争力，也是让企业能够在开发这件事情上投入相对较少的人力物力。也是让一些独立开发的程序员有了一个更加好的选择。

React Native 的发展史 & 未来的规划

 从 2015年到现在 2018年，整整3个年头；React Native 还没有发布1.0版本；所以目前最新版本是 0.56。

 这样也从侧面说明了一门语言想要从一开始的构思到实现再到发布，是需要很长的一段时间的。

 从 React Native 发布的这3年来，陆续的出现了如阿里的 Weex、微信的小程序、谷歌的Flutter。这些语言的出现抢占了不少 React Native 的市场，以及 Facebook 之前对于 React Native 框架设计的原则，负面影响了与 JavaScript 代码的整合程度，也加大了某些特性的开发难度。因此 Facebook 现在准备对 React Native 架构进行重构，通过引入更先进的架构，来提高 JavaScript 和混合开发中原生 API 的互通性。 然后要花多少时间，这个还真的不知道。

React Native 环境的搭建 & 工程的创建

React Native 的环境搭建

macOS 开发 iOS & Android

必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 Xcode or Andriod Studio。

Node, Watchman
我们推荐使用 Homebrew 来安装 Node 和 Watchman 。在命令行中执行下列命令安装：

brew install node
brew install watchman

如果你已经安装了 Node，请检查其版本是否在 v8.3 以上。安装完 Node 后建议设置 npm 镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用 cnpm ！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

Yarn、React Native 的命令行工具（react-native-cli）
Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 之后就可以用 yarn 代替 npm 了，例如用 yarn 代替 npm install 命令，用 yarn add 某第三方库名代替 npm install --save 某第三方库名。

Windows 开发 Android

必须安装的依赖有：Node、React Native 命令行工具、Python2以及 JDK 和 Andriod Studio。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译
Android 应用所需的工具和环境。

Node, Python2, JDK
我们建议直接使用搜索引擎搜索下载 Node 、Python2 和 Java SE Development Kit (JDK)
注意 Node 的版本必须高于 8.3，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（不支持 1.9）。

Yarn、React Native 的命令行工具（react-native-cli）

Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完 yarn 后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

安装完 之后就可以用 yarn 代替 npm 了，例如用 yarn 代替 npm install 命令，用 yarn add 某第三方库名代替 npm install --save 某第三方库名。

创建 React Native 工程

使用 React Native 命令行工具来创建一个名为”AwesomeProject”的新项目：

react-native init AwesomeProject

提示：你可以使用 –version 参数（注意是两个杠）创建指定版本的项目。例如 react-native init MyApp –version 0.44.3。注意版本号必须精确到两个小数点。

Windows 用户请注意，请不要在某些权限敏感的目录例如 System32 目录中 init 项目！会有各种权限限制导致不能运行！

如果你是想把 React Native 集成到现有的原生项目中，则步骤完全不同，请参考[集成到现有原生应用](https:// reactnative.cn/docs/integration-with-existing-apps/)。

React Native 中组件的生命周期 & 运行以及调试

React Native 中组件的生命周期

所谓生命周期，就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。

React Native 也有自己的一些组件，对应的组件也是有自己的生命周期；就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。

可以把组件生命周期大致分为三个阶段：

• 第一阶段：是组件第一次绘制阶段，在这里完成了组件的加载和初始化；

• 第二阶段：是组件在运行和交互阶段，这个阶段组件可以处理用户交互，或者接收事件更新界面；

• 第三阶段：是组件卸载消亡的阶段，这里做一些组件的清理工作。


下面来详细介绍生命周期中的各回调函数。

getDefaultProps

在组件创建之前，会先调用 getDefaultProps() ，这是全局调用一次，严格地来说，这不是组件的生命周期的一部分。在组件被创建并加载候，首先调用 getInitialState() ，来初始化组件的状态。

componentWillMount

然后，准备加载组件，会调用 componentWillMount() ，其原型如下：
void componentWillMount()

这个函数调用时机是在组件创建，并初始化了状态之后，在第一次绘制 render() 之前。可以在这里做一些业务初始化操作，也可以设置组件状态。这个函数在整个生命周期中只被调用一次。

componentDidMount

在组件第一次绘制之后，会调用 componentDidMount() ，通知组件已经加载完成。函数原型如下：

void componentDidMount()

这个函数调用的时候，其虚拟 DOM 已经构建完成，你可以在这个函数开始获取其中的元素或者子组件了。需要注意的是，RN 框架是先调用子组件的 `componentDidMount()` ，然后调用父组件的函数。从这个函数开始，就可以和 JS 其他框架交互了，例如设置计时 setTimeout 或者 setInterval ，或者发起网络请求。这个函数也是只被调用一次。这个函数之后，就进入了稳定运行状态，等待事件触发。

componentWillReceiveProps

如果组件收到新的属性（props），就会调用 componentWillReceiveProps() ，其原型如下：

void componentWillReceiveProps(object nextProps)

输入参数 nextProps 是即将被设置的属性，旧的属性还是可以通过 this.props 来获取。在这个回调函数里面，你可以根据属性的变化，通过调用 this.setState() 来更新你的组件状态，这里调用更新状态是安全的，并不会触发额外的 render() 调用。如下：

void componentWillReceiveProps (nextProps) {
    this.setState({
        likesIncreasing: nextProps.likeCount > this.props.likeCount 
    });
}

shouldComponentUpdate

当组件接收到新的属性和状态改变的话，都会触发调用 shouldComponentUpdate(...) ，函数原型如下：

shouldComponentUpdate(object nextProps, object nextState)

输入参数 nextProps 和上面的 componentWillReceiveProps 函数一样， nextState 表示组件即将更新的状态值。这个函数的返回值决定是否需要更新组件，如果 true 表示需要更新，继续走后面的更新流程。否者，则不更新，直接进入等待状态。

默认情况下，这个函数永远返回 true 用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。

componentWillUpdate

如果组件状态或者属性改变，并且上面的 shouldComponentUpdate(...) 返回为 true ，就会开始准更新组件，并调用 componentWillUpdate() ，其函数原型如下：

componentWillUpdate(object nextProps, object nextState)

输入参数与 shouldComponentUpdate 一样，在这个回调中，可以做一些在更新界面之前要做的事情。需要特别注意的是，在这个函数里面，你就不能使用 this.setState 来修改状态。这个函数调用之后，就会把 nextProps 和 nextState 分别设置到 this.props 和 this.state 中。紧接着这个函数，就会调用 render() 来更新界面了。

componentDidUpdate

调用了 render() 更新完成界面之后，会调用 componentDidUpdate() 来得到通知，其函数原型如下：

void componentDidUpdate(object prevProps, object prevState)

因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了 prevProps 和 prevState 。

componentWillUnmount

当组件要被从界面上移除的时候，就会调用 componentWillUnmount() ，其函数原型如下：

void componentWillUnmount()

在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。

把生命周期的回调函数总结成如下表格:

生命周期	调用次数	能否使用 setState()
getDefaultProps	1(全局调用一次)	否
getInitialState	1	否
componentWillMount	1	是
render	>=1	否
componentDidMount	1	是
componentWillReceiveProps	>=0	是
shouldComponentUpdate	>=0	否
componentWillUpdate	>=0	否
componentDidUpdate	>=0	否
componentWillUnmount	1	否

React Native 的运行以及调试

React Native 的运行

React Native 的调试运行很简单，有两种方法。

一种是通过终端命令。先 cd 到当前项目的目录下，然后输入 react-native run-ios 或者 react-native run-android 这样的话，系统就会默认的帮你打开模拟器并运行当前的代码

而第二种方法就是通过 Xcode 或者 Android Studio 打开项目工程，然后编译运行即可。

关于 iOS 真机调试，需要注意以下几点：

1. 首先确保你的电脑和手机设备在同一个 Wi-Fi 环境下。
2. 打开 Appdelegate.m 文件，修改 URL 中的 IP，从 Localhost 改成你电脑的 IP 地址和端口号（譬如 10.0.1.1:8081）

关于Android真机调试，需要注意以下几点：

1. 首先确保你的电脑和手机设备在同一个 Wi-Fi 环境下。
2. 在设备上运行你的 React Native 应用。和打开其它 App 一样操作。
3. 你应该会看到一个“红屏”错误提示。这是正常的，下面的步骤会解决这个报错。
4. 摇晃设备，或者运行adb shell input keyevent 82，可以打开开发者菜单。
5. 点击Dev Settings -> Debug server host for device。
6. 输入你电脑的 IP 地址和端口号（譬如 10.0.1.1:8081）。在 Mac 上，你可以在系统设置/网络里找查询你的 IP 地址。在 Windows 上，打开命令提示符并输入ipconfig来查询你的 IP 地址。在 Linux 上你可以在终端中输入ifconfig来查询你的 IP 地址。
7. 回到开发者菜单然后选择Reload JS。

React Native 的调试

在React Native 中，当你修改了某个页面的代码之后，你不需要重新点编译运行按钮，React Native提供了一个更加方便快捷的方式去刷新代码。

在iOS模拟器中运行，还可以按下Command⌘ + D 快捷键，Android模拟器对应的则是Command⌘ + M（windows上可能是F1或者F2）。
在 iOS 真机中运行或者是 Android真机中运行，只需要摇晃手机，就会弹出功能面板给你选择。

调试模式下，各个模块对应的功能

模块选项	对应的功能
Reload	刷新页面
Debug JS Remotely	该功能允许开发人员在 Chrome 中调试应用，其调试方式和调试 Web 应用一样
Enable Live Reload	该功能主要用来实现自动刷新。
Start Systrace	该功能主要用来监控应用在一段时间内的指标信息
Enable Hot Reloading	开启热加载(同样是实现页面的自动刷新)
Show Inspector	查看到当前选中元素的位置、样式、层级关系、盒子模型信息等等。以及提供了监控应用性能
Show Perf Monitor	该功能启用后会显示一个监控窗口，显示出实时的内存占用、UI 和 JavaScript 的 FPS 等信息

需要注意的是： Reload 只有修改 JavaScript 文件时，刷新功能才起作用。如果新增了文件或者修改了 Native 代码，就需要使用 Xcode 重新编译应用了。

React Native 与原生的交互 & 导入第三方库

React Native 与原生的交互

React Native 也并不是万能，在某些方面来说，它可能还缺少一些比较实用性的 API 例如蓝牙通讯，通讯录等，那么这个时候我们有接到有需要需要用到它所缺少的 API 怎么办呢。这个时候就需要我们自己动手封装一个功能或者视图给到 React Native 调用了。那么这个时候我们该怎么去操作呢。由于篇幅有限，大家可以去看我之前写过的一篇文章 封装iOS原生UI 控件给RN调用 也可以去 RN 的中文网 看看是怎么写的

React Native 导入第三方库

React Native 工程项目导入第三方库有两种方式。

第一种是在原生中，导入别人造好的轮子，然后通过 React Native 与原生的交互暴露给 React Native 层调用。这种方式相对来说会比较麻烦，并且只支持单方面的语言调用。好处也比较明显，那就是相对来说，会稳定一点。

第二种方式，是直接在 GitHub 上搜寻别人造好的轮子，有些轮子是直接用 JavaScript 写的，能兼容Android、iOS 双平台，这种是最好的。当我们找到这种轮子的时候，我们需要通过命令行导入到我们的 React Native 项目中。可以使用一下命令：

npm i xxx --save
yarn add xxx

这样，我们就可以将第三方库导入到我们的项目。就只需要在用到的地方 import 一下就可以了

这里需要注意的是，有些第三方库的导入可能还需要链接原生库，所以你有些时候还需要用到一个连接的操作。需要执行 react-native link xxx 该命令既可

React Native 热更新

React Native 的热更新

众所周知，App Store的审核机制是特别严格的，这个时候如果线上版本出现了重大问题，从发现到修复到测试再到上线，最快起码也得要1~2个星期左右。光是审核，可能就要占据3~4天时间。所以没有有一个版本能够解决这个问题呢？当然是有的，iOS 有两个比较热门的插件，一个是JSPatch，另一个就是React Native 的热更新了
好了，废话不多说，咱们就来看看要怎么去实现 React Native的热更新吧。
首先，我们需要在 http://update.reactnative.cn 这个网站上先注册我们的App
注册好了之后呢，我们需要继续借助终端来实现下一步的操作。首选我们先 cd 到我们的项目更目录下，(例如我在桌面上有个项目了)，那我就执行如下的命令

cd /Users/CCYQ/Desktop/AwesomeProject
npm i -g react-native-update-cli // 这一句在每一台电脑上仅需运行一次
npm i react-native-update@具体版本请看下面的表格
react-native link react-native-update

因为React Native不同版本代码结构不同，因而请按下面表格对号入座：

React Native版本	react-native-update版本
0.26及以下	1.0.x
0.27 - 0.28	2.x
0.29 - 0.33	3.x
0.34 - 0.45	4.x
0.46及以上	5.x

因为我在 AwesomeProject 这个项目里面用的是最新的 0.56 版本，所以我应该执行

npm i react-native-update@5.x

这个时候，你有可能会报这么一个错误 Unexpected end of JSON input while parsing near 'xxx' 那么你应该这样解决：

npm config set registry http://registry.cnpmjs.org
npm i react-native-update@5.x
react-native link

iOS 记得在工程target的 Build Phases->Link Binary with Libraries 中加入libz.tbd、libbz2.1.0.tbd

以上步骤做完之后，我们继续执行以下命令：

$ pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>

这会在项目文件夹下创建一个.update文件，注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。

登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建：

$ pushy createApp --platform ios
App Name: <输入应用名字>
$ pushy createApp --platform android
App Name: <输入应用名字>

两次输入的名字可以相同，这没有关系。

如果你已经在网页端或者其它地方创建过应用，也可以直接选择应用：

$ pushy selectApp --platform ios
14846) FirstApp(ios)

Total 2 ios apps
Enter appId: <输入应用前面的编号>

选择或者创建过应用后，你将可以在文件夹下看到update.json文件，其内容类似如下形式：

{
    "ios": {
        "appId": 1,
        "appKey": "<一串随机字符串>"
    },
    "android": {
        "appId": 2,
        "appKey": "<一串随机字符串>"
    }
}

到这个时候呢，我们的App就已经有了热更新的功能了，但是还不是全部，我们还需要去使用这个功能，具体该如何使用呢？请参照 添加热更新功能

总结

编者的话

到这里呢，基本上React Native 或多或少的功能就已经介绍完毕了。相信看到这里，基本上大家都会问，为啥没有一句代码呢？是的，这篇文章的目的是想让你先从表面了解一下React Native的使用，以及一些操作并不是很常用的功能。对于我们程序员来说，这些东西就是了解一下，然后并且是偶尔用一次而已；更多的时候我们还是在构建项目并且画界面写功能等操作；当我们有自己空余时间的时候，可以去深究一下。 然后如果真的要用一篇文章去教会大家怎么用React Native 的话，那篇幅可能就得更加长了。因此在这里我就做了这么一个操作，将他们分开来。总之，能看到这里，也实属不易；如果文中有出现什么差错的话呢，可以联系我及时纠正。

引用

对于这篇文章，我也只是简单的整理了一下而已，也需要感谢各路大神对React Native的踩坑以及填坑。以下是本文或多或少引用的文章链接：

1. React Native中文网
2. React Native 中组件的生命周期
3. React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）
4. React Native 热更新快速入门-准备工作
5. 快速入门-添加热更新功能