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

2019-09-09 17:57:04 浏览数 (1)

简介

这是一个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优缺点

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

  1. 跨平台开发：运用React Native，我们可以使⽤同⼀份业务逻辑核⼼代码来创建原生应⽤：运⾏在 Web端，Android端和iOS端;
  2. 追求极致的用户体验:实时热部署;
  3. learn once,write everywhere：React Native不强求⼀一份原⽣生代码⽀持多个平台，所以不不是write once,run anywhere;

然后是缺点 ：

  1. reactnative在iOS上仅⽀支持iOS7以上，Android仅支持Android4.1以上;
  2. 开发初期成本较高（配置麻烦）;
  3. 部分复杂的界⾯面和操作，RN无法实现(可以考虑引入原⽣补充实现不了的功能);

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

建议的开发配置

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

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

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

准备

  1. 假如安装node10以上版本。那么需要尝试加速一下你的npm（不要使用cnpm）
代码语言：javascript复制
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
  1. 使用homebrew安装Watchman：
代码语言：javascript复制
brew install watchman

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

  1. 安装yarn 和rn脚手架：
代码语言：javascript复制
npm install -g yarn react-native-cli

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

安装之后再设置一下源：

代码语言：javascript复制
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

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

安卓开发环境

安装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

安装完毕后执行：

代码语言：javascript复制
javac -version

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

安装 Android Studio

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

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

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

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

安装android sdk

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

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

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

  • Android SDK Platform 28
  • Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

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

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

配置 ANDROID_HOME 环境变量

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

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

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

代码语言：javascript复制
# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator

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

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

请确保你正常指定了 Android SDK 路径。你可以在 Android Studio 的”Preferences”菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android 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 | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

尝试一下

创建目录：

代码语言：javascript复制
react-native init AwesomeProject
准备设备

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

测试adb连接 （安卓）

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

2. 通过 USB 数据线连接设备 下⾯检查你的设备是否能正确连接到 ADB(Android Debug Bridge)，使⽤ adb devices 命令:

代码语言：javascript复制
adb devices

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

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

第一个安卓应用

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

代码语言：javascript复制
cd AwesomeProject
react-native run-android

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

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

第一个ios应用

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

代码语言：javascript复制
cd AwesomeProject
react-native run-ios

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

ide reactnative react android javascript

0 人点赞