React Native移动开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

第2章 React Native环境搭建与调试

2.1 React Native环境搭建

工欲善其事，必先利其器，在进行正式开发之前，首先需要搭建好相关的开发环境。搭建React Native开发环境，需要如下软件。

· Node.js4.0及以上版本。

· Mac系统下Xcode6.4以上，Java环境及Android环境。

· Mac系统下建议安装Homebrew，以及Watchman和Flow等工具。

2.1.1 Mac环境下搭建React Native

安装Node.Js

从官网下载Node.js（官网地址：https://nodejs.org/en/），如图2-1所示。建议设置npm镜像以加速后面的过程。node安装命令如下：

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

图2-1 Node.js下载与安装

安装完成后，我们输入node-v，如果输出版本号，说明安装成功，如图2-2所示。

图2-1 Node.js下载与安装

安装npm

npm是一个包管理工具，用来管理React中依赖的包，可以理解为一个项目结构的管理工具，作用类似于maven、gradle等。安装命令如下：

        npm install -g react-Native-cli

如果已经安装过，可以使用如下命令进行升级：

        npm install npm@latest -g

安装完Node后建议设置下npm镜像（淘宝镜像）以加速项目的构建，镜像命令如下：

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

安装Yarn

Yarn是Facebook提供的替代npm的包管理工具，可以加速node模块的下载和构建。相比npm, Yarn具有速度快，离线模式，版本控制等优势。安装Yarn的命令如下：

        npm install -g yarn

使用Yarn下载React Native的命令如下，具体如图2-3所示。

        npm install -g yarn react-Native-cli

图2-3 使用Yarn下载React Native

上面的两种方式，不管哪种都可以下载React Native环境依赖包，然后静静地等待下线即可。

安装Homebrew

Homebrew用于在Mac上安装一些OS X没有的UNIX工具（比如著名的wget）。React Native包管理器同时使用了node和watchman环境，所以上面的软件还可以使用Homebrew来安装，命令如下：

        brew install node
        brew install flow
        …

安装Watchman

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

        brew install watchman

至此，React Native的基础环境就搭建好了，为了将应用部署到移动设备上，还需要配置Android、iOS相关的运行环境。

React Native版本升级

React Native作为开源的移动跨平台框架，在很多细节上还不是很完善，所以版本迭代更新的速度相对较快。为了更好地开发出高质量的移动应用，需要不断地对React Native版本进行升级。

首先，使用命令查看本地的版本，命令如下：

        react-native --version

然后，使用npm包管理命令查看React Native版本信息，命令如下，具体如图2-4所示。

        npm info react-native

图2-4 查看版本信息

使用升级命令直接升级到指定版本，如下：

        npm install --save react-native@0.45

升级完成之后，最常见的错误就是依赖的模块版本不统一，为此，根据提示升级React等相关模块即可。然后运行如下命令：

        react-native upgrad

对于一些老项目，版本跨度比较大，建议对项目进行备份，将老项目的相关逻辑代码拷贝到新建的项目中，拷贝的内容大体如下：

iOS文件目录

· ProjectName.xcodeproj

· AppDelegate.h

· AppDelegate.m

· Info.plist

· Images.xcassets

➢ Image.imageset

➢ AppIcon.appiconset

➢ Contents.json

Android文件目录

· android/settings.gradle

· android/app/build.gradle

· android/app/proguard-rules.pro

· android/app/src

至此，React Native的升级操作就完成了。假如升级到最新版本后不是特别稳定，想要回到之前的版本，有两种方式：第一种是修改package.json文件；第二种是执行命令npm install--save react-native@版本号。经过上述操作之后，不要忘了更新相关的依赖文件，如果降级之后报错，建议删除node-modules文件夹，然后在使用npm install命令重新更新依赖文件。

2.1.2 React Native开发IDE

安装Atom

Atom是专门为软件开发工作者推出的一款跨平台文本编辑器，如图2-5所示。它具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS、HTML和JavaScript等网页编程语言；支持宏，自动完成分屏功能，集成了文件管理器等功能和优点。

图2-5 Atom编辑器

打开Atom的官网（https://atom.io/），当然你也可以到国内的镜像地址下载，比如淘宝国内镜像地址：https://npm.taobao.org/mirrors/atom/1.7.2/

React Native官方推荐Atom+Nuclide来开发。Atom集成Nuclide的步骤如下：

点击菜单栏【Atom】→【Preferences】，或者使用快捷键【command+, 】打开设置面板，然后在Install Packets的输入框中，输入Nuclide，点击【install】，如图2-6所示。安装完成之后就可以在Atom的工具栏看到Nuclide插件，如图2-7所示。

图2-6 Atom安装Nuclide插件

图2-7 Nuclide安装结果

到此，React Native开发所需的IDE环境就安装完成了，接下来就可以使用IDE编写代码了。

2.1.3 创建React Native项目

在创建项目方面可以使用IDE辅助创建React Native项目，也可以使用命令方式创建。使用命令方式创建项目，首先创建项目工作空间，然后打开Mac终端，输入如下命令创建项目，如图2-8所示：

        react-Native init Demo（项目名）

图2-8 使用命令创建项目

然后等待npm构建项目即可。

当项目构建完成之后，使用Atom导入新建的项目就可以开始编写代码了。如果使用WebStrom作为React Native开发IDE，则比较简单。

2.1.4 运行React Native项目

使用快捷键【commad+shift+p】打开面板，运行命令“React Native Packager”，或者使用图形化界面，依次点击【Nuclide】→【React Native】→【Start Packager】启动打包操作，如图2-9所示。

图2-9 启动React Native

打开终端运行项目，先定位到项目所在的位置，然后使用如下命令运行项目：

        //运行iOS
        react-Native run-ios
        //运行Android
        react-Native run-android

如果要在真机上运行iOS应用，则需要准备一台装有Mac系统的电脑，同时还需要一个Apple ID。如果需要把应用发布到App Store，那么还得去苹果开发者网站购买一个开发者账户（在自己手机上测试则不用）。要想在真机上运行iOS应用，你可以将USB连接至电脑，或者在Xcode的设备管理中添加你的设备。然后你就可以在你的真机上使用iOS应用或者调试应用了，如图2-10所示。

图2-10 运行iOS项目

Android设备只需要使用USB安装即可。如果需要使用真机调试，摇晃设备就可以打开开发者菜单，将其中的【localhost】改为电脑的IP地址，启用开发者菜单中的【Debug JS Remotely】选项即可开启调试功能。

2.1.5 iOS环境

目前React Native在iOS环境下需要Xcode7及更高版本，使用Xcode打开React Native项目的iOS文件夹中，选中．xcodeproj文件导入项目文件即可，如图2-11所示。导入后的项目结构如图2-12所示。

图2-11 导入iOS项目

图2-12 iOS项目结构

使用快捷键【command+R】或者直接点击运行按钮运行项目可能会报错，这时候你需要使用命令先启动React Native相关依赖环境。启动命令如下：

        react-Native start

2.1.6 Android环境

相比iOS的环境依赖，Android的环境依赖就复杂得多，对应的官方配置文档地址为：http://facebook.github.io/react-Native/docs/android-steup.html。配置Android依赖环境，总体来说分为三步：安装Java环境，安装Android SDK环境，配置其他Android环境。

首先，需要安装配置Java和Android环境。

❶ 下载并安装最新版本的JDK，请注意选择的是x86还是x64版本，JDK的bin目录加入系统PATH环境变量中。JDK下载地址为：http://www.oracle.com/technetwork/java/javase/downloads/index-JSp-138363.html。

❷ 安装Android SDK环境，可以单独安装Android SDK，也可以通过Android Studio一并安装。这里直接使用Android SDK一并安装。Android Studio的下载地址为：http://www.android-studio.org/。然后配置Android相关环境变量。

❸ 打开Android SDK管理器，如图2-13所示。确保选中以下选项。

图2-13 Android SDK管理器

· Android SDK Build-tools version 23.0.1

· Android 6.0（API 23）

· Android Support Repository

接下来安装模拟器，推荐使用Genymotion，这是一款强大的Android模拟器，下载地址：http://www.genymotion.net/。在Android Studio配置Genymotion插件方面，使用快捷键【command+, 】，或者依次点击【Android Studio】→【Preferences】→【Plugins】，搜索Genymotion插件并安装，如图2-14所示。安装完成之后，打开Android studio，点击Genymotion插件图标配置相关信息即可。

图2-14 Android Studio安装Genymotion插件

打开Android Studio导入React Native项目下的Android文件，如图2-15所示。

图2-15 导入Android项目

定位到项目目录，使用命令npm start启动React Native相关依赖环境，然后使用命令react-native run-android启动Android项目即可，如图2-16所示（注意，运行命令前先启动Android模拟器）。

图2-16 Android运行React Native项目

2.1.7 Windows环境下搭建React Native

Windows环境下搭建React Native开发环境的步骤和Mac大体相同，在Windows环境下搭建React Native环境，依然需要Node、npm、Yarn、Watchman等环境的支持。不同之处在于Mac使用npm或者Yarn下载React Native，而在Windows环境下，则直接使用git克隆React Native到本地即可。克隆命令如下，具体见图2-17。

        git clone https://github.com/facebook/react-Native.git

图2-17 使用git克隆React Native到本地

进入React Native目录下的react-native-cli目录，输入如下命令即可安装相关依赖包到全局环境中。

        npm install <Name>-g

当然，除了如图2-18介绍的插件外，读者还可以根据实际需要安装一些其他插件，这些插件能提升React Native的开发效率，带来事半功倍的效果。

图2-18 安装相关插件

上一章目录下一章