React Native介绍及开发环境<Mac搭建

简介

这是一个RN的上手课程。长期更新。包括对官方文档的解读。

曾经有这么一个说法：世上凡能用JavaScript实现之事物，最后都用JavaScript实现了。

笔者在八月底十天的找工作时间内，和不下5个hr沟通过所谓”用js写原生应用开发”，愈发深刻感受到使用js来写移动app已经成为了一个热门的前端技能。3-5年经验的前端，能写混合开发的web前端相当难找。招聘甚至不敢要求前端一定要会，多数时候需要在react基础上，入职以后再上手——是的，岗位要求需要懂更多react，而不是vue。而光是这个条件就筛掉很多人了。对于所谓的中小公司来说，有一个注重应用的app几乎用不上原生安卓开发出马。

当然，现在的技术框架更多了。从早期的backbone到reactNative到weex再到flutter，各种框架下写移动应用的内核层出不穷，但是如果要求你用javscript写app，RN仍然是企业级最广泛稳定的移动端开发框架。

历史沿革

在 React Native 出现前，业界通常会选择三种移动技术(Native App、HTML5、Hybrid)之⼀进⾏移动应用开发。

Native App（原生app）:开发原⽣应⽤自然性能最好，功能强⼤。但多平台版本的开发、维护要花费大量的人力物力(iOS版本迭代审核需要时间)。

HTML5（web app）:虽然拥有 Web 的优势——即灵活的布局能⼒、免发版的敏捷迭代潜⼒、优秀的跨平台特性。可以在新闻资讯等⼀一些强排版、弱交互的展示类 应用 上大展拳脚。但由于 WebView 在移动设备上的性能制约，始终难成⼤器。

Hybrid App（混合开发）:JS+Native两者相互调⽤为主，从开发层面实现“一次开发，多处运⾏”的机制，成为 真正适合跨平台的开发。Hybrid App兼具了了Native App良好⽤用户体验的优势，也兼具了了Web App 用HTML5跨平台开发低成本的优势，但是这个⽅法存在诸多问题，比如无法访问离线数据、⽆法访问设备、⽆法远程更新等等。

RN来了

2015年，Facebook在React.js Conf 大会上推出了一个用于开发Android和iOS App的框架，主要编程语言是JavaScript。它的出现使应用拥有了Native的用户体验，又保留了React的开发效率。

React Native 的底层引擎是 JavaScript内核，但调⽤的是原⽣的组件⽽非 HTML5 组件。这样运⾏时可以做到与 Navive App 相媲美的性能体验，同时因为 JavaScript 代码可以使用后端强⼤的 Web 方式管理，既可以做到⾼效开发，也可以实现快速部署和问题热修复。

于是你可以只用JavaScript来编写原生移动应用。它在设计原理上和React一致，通过声明式的组件机制来搭建丰富多彩的用户界面，并且适配到android和ios机型上。

React Native产出的并不是“网页应用”， 或者说“HTML5应用”，又或者“混合应用”。最终产品是一个真正的移动应用，从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

React Native优缺点

做一件事情之前，必须深刻了解它的优点和缺点。首先看看优点 ：

跨平台开发：运用React Native，我们可以使⽤同⼀份业务逻辑核⼼代码来创建原生应⽤：运⾏在 Web端，Android端和iOS端;

追求极致的用户体验:实时热部署;

learn once,write everywhere：React Native不强求⼀一份原⽣生代码⽀持多个平台，所以不不是write once,run anywhere;

然后是缺点 ：

reactnative在iOS上仅⽀支持iOS7以上，Android仅支持Android4.1以上;

开发初期成本较高（配置麻烦）;

部分复杂的界⾯面和操作，RN无法实现(可以考虑引入原⽣补充实现不了的功能);

RN的搭建配置非常繁琐，值得用一篇文章去说。笔者将就Mac版安装进行记录。

建议的开发配置

在windows机上搞苹果开发可以尝试运行黑苹果系统，但据说很伤机器，而且电脑也不便宜。如果要开发苹果应用，Mac机是少不了的。

因此RN如果要做全套，起码需要一台MBP+一台iphone+一台安卓机。

此外ios开发者账号是要钱的（每年800+）。所以本系列文章都会以安卓开发为主。

准备

假如安装node10以上版本。那么需要尝试加速一下你的npm（不要使用cnpm）

使用homebrew安装Watchman：

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

安装yarn 和rn脚手架：

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

安装之后再设置一下源：

安装完 yarn 之后就可以⽤ yarn 代替 npm 了，例如⽤ yarn 代替 npm install 命令，用 代替 。

安卓开发环境

安装JDK（Java Development Kit）

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本，Java SE 8.0）。那就去官网下载一个：

https://www.oracle.com/java/technologies/jdk8-downloads.html

安装完毕后执行：

可以打印出信息就成功了。

安装 Android Studio

去下载：http://www.android-studio.org/

安装界面中选择”Custom”选项，确保选中了以下几项：

然后点击”Next”来安装选中的组件。

安装android sdk

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击”Configure”，然后就能看到”SDK Manager”。

在 SDK Manager 中选择”SDK Platforms”选项卡，然后在右下角勾选”Show Package Details”。展开选项，确保勾选了下面这些组件（）：

（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

然后点击”SDK Tools”选项卡，同样勾中右下角的”Show Package Details”。展开”Android SDK Build-Tools”选项，确保选中了 React Native 所必须的版本。你可以同时安装多个其他版本。

最后点击”Apply”来下载和安装这些组件（原有的确保安装即可，全选其实不可能。）

配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

具体的做法是把下面的命令加入到文件中：

译注：~表示用户目录，即，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用命令创建或编辑。如不熟悉 vi 操作，请点击这里学习。

如果你的命令行不是 bash，而是例如 zsh 等其他，请使用对应的配置文件。

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

请确保你正常指定了 Android SDK 路径。你可以在 Android Studio 的”Preferences”菜单中查看 SDK 的真实路径，具体是Appearance & BehaviorSystem SettingsAndroid SDK。

ios开发环境

首先你得安装xcode。

xcode（6.1G）:它是开发iphone，ipad，iwatch，MacOS的IDE。

React Native 目前需要Xcode 9.4 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

可以在应用商店免费下载，也可以到官网去下：https://developer.apple.com/download/more/

Xcode 的命令行工具

启动 Xcode，并在菜单中检查一下是否装有某个版本的。Xcode 的命令行工具中包含一些必须的工具，比如等。

尝试一下

创建目录：

准备设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机，也可以是模拟器。推荐开发环境:Mac系统 + ⼀一部廉价的安卓⼿手机

测试adb连接 （安卓）

1.开启USB调试

在默认情况下 Android 设备只能从应⽤用市场来安装应⽤用。你需要开启 USB 调试才能⾃自由安装开发版的 APP。确定你已经打开设备的 USB 调试开关。

2.通过USB数据线连接设备

下⾯检查你的设备是否能正确连接到 ADB(Android Debug Bridge)，使⽤ adb devices 命令:

当你看到下面有设备列表时，就说明连接成功了。

注意，你每次只应当连接⼀一个设备。连接真机时应当关掉模拟器。

第一个安卓应用

这时候回到你的应用，执行编译命令：

如果是第一次编译，这是一段相对比较长的编译等待

编译完成后，手机收到安装请求，手机上看到这个页面，表示已经安装成功了。

第一个ios应用

ios不用做什么配置，直接即可运行。

这时候在ios模拟器上就会看到当前的程序。