新奇篇 之 Mac 配置 React Native 0.56

前言

最近，好忙。

忙碌的背后，是当年欠下的技术债找上门了。

幸好，慢慢的进入了状态，加油～！

据说后期的项目会涉及到 React Native，今天在等待导入依赖的期间，简单配置了一波，特此做个记录。

React Native 开搞～

开搞之前，我们简单了解一下什么是 React Natice？

1

React Native 简述

React Native 是 Facebook 在 React.js Conf 2015 大会上推出的基于 JavaScript 的开源框架。

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

且 React Native 有句很牛掰的标语：

Learn once, write anywhere

简单来说，跨平台，你会这个，LZ 预估就能直接一份代码搞 Android 和 iOS，其次嘛，Facebook 已经在多项产品中使用了 React Native，Enmmm，暂时没啥可担心的。

2

了解下有关 React Native 优/劣势

学习一个东西，首先要明确目标，其次得了解它的优势以及劣势，那么 React Native 具有哪儿些优/劣势又是什么呢？

优势：

• 组件化开发，复用率高，而且目前组件日渐完善，隶属于前端式开发；
• 同时支持 Android 和 iOS 俩大平台，Learn once,write anywhere，野心勃勃哦；
• 强大的热更新；
• 可以和原生页面互相调用，作为一部分嵌入到一个已有的原生 app 中，也就是传说中混合开发；
• 。。。

劣势：

• 支持的组件不全面，虽然还在日渐完善；
• 程序的性能，据说在配置低端机上会有明显卡顿情况；
• 涉及到底层的东西需要在 iOS 和 Android 单独开发，然后在 JS 层进行调用；
• 学习成本高。要学习 JavaScript 系列东西，还需要涉及到 iOS，Android 开发相关知识；
• 。。。

以上综合于网络，如有不对，请指正。

3

配置基本环境

首先要明确俩点：

• 必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Andriod Studio。
• 虽然你可以使用任何编辑器来开发应用（编写 JS 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

由于推荐使用 Homebrew 来安装 Node 和 Watchman，那么我们第一步就是去安装这个小家伙。

Step 1：安装 Homebrew

Homebrew 可以安装 Apple 没有预装但我们需要的东西，可以理解为它就是一个载体，通过它去获取我们需要的工具。

官方地址如下：

https://brew.sh/

将以下命令复制到终端：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

脚本会在执行前暂停，并说明将它将做什么。

如下图所示：

期间会让你键入密码，之后开始下载

完成后，会为我们输出提示：

Step 2：安装 Node

Node 是一个 JS 运行时环境。简单来说就是可以解析、执行 JS 代码。

终端输入如下：

brew install node

如下图所示：

接着，检查其版本是否在 v8.3 以上：

bogon:~ heliquan$ node --version
v10.10.0

Step 3：安装 Watchman

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

在终端键入以下命令：

brew install watchman

如下图所示：

Step 4：建议设置 npm 镜像以加速后面的过程

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

Step 5：Yarn 安装以及设置镜像地址

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

键入以下命令行：

npm install -g yarn react-native-cli

设置镜像源：

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

Step 6：JDK 版本检查

这里需要注意的是：

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。

键入以下命令查看：

bogon:~ heliquan$ javac -version
javac 1.8.0_181

Step 7：Android Studio 方面

此处直接省略安装以及配置步骤。

这里列举出几个需要注意的细节：

• Android SDK Build-Tools 选项中，确保选中了 React Native 所必须的 26.0.3 版本；
• 配置 ANDROID_HOME 环境变量：

使用 source $HOME/.bash_profile 命令来使环境变量设置立即生效（否则重启后才生效）。可以使用 echo $ANDROID_HOME 检查此变量是否已正确设置

老规矩，输出 Hello World

LZ 感觉很湿高大上啊，不懂者无畏，一起继续～

Step 1：创建 React Native 项目

命令行键入以下：

react-native init 项目名称

完成之后，如下所示：

提示：

当然也可以使用 --version 参数创建指定版本的项目。例如 react-native init MyApp --version 0.44.3。注意版本号必须精确到两个小数点。

Step 2：编译并运行 React Native 应用

前提需要保证当前已有设备处于连接状态，查看命令如下：

通过 cd 命令进入到项目目录地址中，接着开启 npm：

cd 项目名称（地址）
npm start

操作如下图：

接着键入 react-native run-android，详情如下：

react-native run-android

如下操作图：

而此时手机端则显示一个链接 local 样式，由于 LZ 好奇中，忘记截图咯。

运行完成后，如下图：

那么接着随便找个编辑器，修改内容，之后摇动手机，弹出如下提示：

选择第一项，查看效果：

手机已显示我们最新修改～

首战，到此结束～