1.windows下安装react-native环境

2017-07-26 本文已影响41人 xiangdong_9013

7月25日更新：

快速简洁创建react-native应用的方法：仅需要按此文档安装到第四步完成nodejs，然后执行：

npm install -g create-react-native-app

安装成功后，即可使用：

create-react-native-app XXXproject

来创建一个react-native应用了。具体参见：更快速的 React Native 应用开发之道
但目前这个工具仅用于react-native学习，还不适用于开发商用程序。

预备知识

React Native是facebook刚开源的框架，可以用javascript直接开发原生APP。

开发react native，需要一定的前端开发知识基础，此外还需要掌握：

ES6语法基础，ECMAScript 6 入门
Node.js基础，Node入门
JSX语法基础，React基础——JSX语法
Flexbox布局，Flex 布局教程：语法篇

以下步骤请在翻墙状态下操作。

1. 安装Chocolatey 包管理器（非必须）

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。这个非必须，但用它安装python2和nodejd比较方便。使用它安装有个好处，环境变量是自动设置的。在CMD中输入：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

2. 安装jdk

注意，64位机器请安装64位版本，强烈建议安装jdk1.8版本。在CMD中输入：

choco install jdk8

3. 安装Python2

由于目前不支持python3，所以需安装python2，在CMD中输入：

choco install python2

4. 安装最新版node.js（8.1.3）

choco install nodejs.install

5. 安装Visual Studio Express 2013 Windows Desktop版

安装此应用，是为了避免windows下npm install一些包无法编译的问题，仅对win10有效，如已安装.NET framework4.5，貌似问题也可解决。下载地址：Visual Studio Express 2013 Windows Desktop版.

6. 安装git客户端（非必须）

7. 安装react-native命令行工具React-native-cli和yarn JavaScript包管理工具

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g react-native-cli

除了npm可用于安装依赖外，还有一个等同于npm的命令yarn（强烈建议安装），yarn比npm在网络性能优化、解决多版本冲突等方面更优，参见：Facebook 新推 Yarn，或取代 npm 客户端，安装方式：

npm install yarn -g
#安装完成yarn后，可更改镜像地址为国内地址。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

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

yarn常用命令

yarn / yarn install，等同于npm install （批量安装依赖）

yarn add xxx，等同于 npm install xxx —save （安装指定包到指定位置）

yarn remove xxx，等同于 npm uninstall xxx —save （卸载指定包）

yarn add xxx —dev，等同于 npm install xxx —save-dev

yarn upgrade，等同于 npm update （升级全部包）

yarn global add xxx，等同于 npm install xxx -g （全局安装指定包）

8. 创建react-native项目

CMD命令行进入到希望的android工作目录下（建议就在react-native根目录下），输入：

react-native init MyApp

9. 安装android SDK

单独安装sdk；
设置环境变量ANDROID_HOME：Android SDK Manager的位置例如：（PATH => E:\Android\sdk）设置环境变量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）
此步骤中需要翻墙，并下载很多版本的android sdk包，我手上有一份包含android 8.0在内的很多版本sdk了，大约59GB。

我认为这一步非必须，因为android studio2.0以后的版本都默认包含sdk，不过我没试过。因为android studio默认的sdk路径在C盘，所以C盘预留空间要足够大，比如200GB以上；

10. 安装android studio

目前最新版本是2.3。

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。因此安装过程中不要改动安装过程的选项。确认勾选了以下内容：

默认安装了Android Support Repository；
勾选了是Android SDK和Android Device Emulator；
在安装完AS之后，file-->settings-->Appearance&&Behavior-->System Settings-->Android SDK中：

在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image；

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

11. 运行MyApp

确保上一步中安装了android device emulator，这里创建一个android Emulator，然后打开它，出现一个模拟的android手机界面。

在android studio中打开第7步构建的MyApp项目，在着手修改该项目前，可先看运行效果，在项目目录下运行CMD命令：

npm install 
react-native run-android

npm install也可以改用yarn命令，yarn 相当于npm install，global安装命令由npm install -g xxx改为yarn global add xxx)

执行该命令后，会生成项目的apk安装包并安装到android Emulator中执行。

第一次构建android程序很慢，为加快gradle第一次的构建速度，也可拷贝我电脑的.gradle目录（C:\Users\Administrator\.gradle），大约300MB。

gradle的默认目录可以修改。添加GRADLE_USER_HOME环境变量，指向自定义的.gradle目录即可。

还可以开启Gradle Daemon，可极大的提升java代码的增量编译速度。在CMD中输入：

(if not exist "%USERPROFILE%/.gradle" mkdir "%USERPROFILE%/.gradle") && (echo org.gradle.daemon=true >> "%USERPROFILE%/.gradle/gradle.properties")