前言
年后新的项目需要用到混合开发，这里一边学习一边记录学习的过程，主要使用目前最新的RN版本，借鉴React Native中文网来熟悉它的完整过程。
搭建开发环境(目标平台Android 开发平台WindowS)
（一）安装Chocolatey
Chocolatey ['tʃɒklɪti,'tʃɒkləti] 是一个Windows上统一包管理软件，使你可以在命令行下安装软件，便于开发者按需快速安装应用程序和工具，不用去各个网站找工具，不过国内访问和下载速度相对慢一点。
-
一般通过如下命令的方式安装
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
安装过程中需要注意以下两点
1，需要通过管理员权限启动CMD命令行
管理员身份运行CMD.png
2，配置Chocolatey的安装目录，默认是安装在C:\ProgramData\chocolatey，我们需要在环境变量里配置其安装路径，然后再执行其安装命令。
Chocolatey配置环境变量.png
-
执行我们的安装命令：
安装过程如下：
Chocolatey安装命令.png
最后在我们设置的F:\chocolatey目录下可以看到它的安装内容。
（二）安装Python2
安装之前说一下，我们的工具都是通过Chocolatey的操作命令来安装，Chocolatey详细的操作命令可以到Chocolatey官网的Commands命令标签下去找，里面有所有的操作符和实例。
- 打开命令提示符窗口，使用Chocolatey来安装Python 2 ['paɪθɑn]
choco install python2
- 程序默认是安装在C盘下面的，如果想配置自定义路径，Chocolatey官网覆盖默认安装目录和Chocolatey的Python2包版本安装介绍里可以找到相关方法，这里使用一个混合的方法安装。
choco install python2 -y -o -ia "'/qn /norestart ALLUSERS=1 TARGETDIR=F:\Python2'"
- 安装成功后如下
Python2下载.png
- 同时也可以到Python2官网，自己去下载最新版本，然后安装到自己想要的目录，Chocolatey命令方式是从Chocolatey的软件仓库里去下载，下载的内容是一样，只是方式不同而已。
（三）安装NodeJS
- 打开命令提示符窗口，使用Chocolatey来安装NodeJS，也可以到Node.JS官网去下载，没选择安装版本时默认是安装最新版本。安装成功后通过node -v命令查看版本。
choco install nodejs.install
-
nodejs自定义目录的安装方法，用官网方法都失败，也没找到解决办法，目前就装在默认C盘里了。
-
安装完node后设置npm镜像以加速后面的过程。
npm在nodejs安装目录C:\Program Files\nodejs\node_modules\npm下可以看到，
这里我们需要在环境变量里配置npm
1，配置环境变量，这里只需要配置NodeJS的路径就行，npm的路径不需要再加入，都加入后续操作会报错。
nodejs配置环境变量.png
2，通过将%NODE_PATH%加入path中完成配置过程。
3，在命令窗口中执行以下命令，完成镜像设置。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
（四）安装Yarn、React Native的命令行工具（react-native-cli）
Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
- 1，命令行安装yarn
npm install -g yarn react-native-cli
安装成功后，根据安装过程中的提示，找到默认的安装目录，把其配入环境变量，如下将C:\Users\PVer\AppData\Roaming\npm加入环境变量path目录下即可。
react-native操作命令目录.png
- 2，安装完yarn后同理也要设置镜像源，在输入命令之前，同样需要把yarn配入环境变量，同上，我们在安装yarn时会有显示默认的安装目录，我们找到其bin目录加入到path即可。
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
我们在配置好yarn的环境变量后执行命令如下：
yarn操作命令.png
- 3，安装完yarn之后就可以用yarn代替npm了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install --save 某第三方库名。
（五）安装Android Studio
AS的安装这里就省略，这是每个安卓开发人员必备的，下面来说说需要注意的几个地方。
-
React Native目前需要Android Studio2.0或更高版本。
-
Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。
-
Android studio的Settings->Android SDK中设置SDK-Platforms和SDK-Tools
1，配置SDK-Platforms，选择Show Package Details，勾选Android 6.0下的如下6项。
SDK-Platforms设置.png
2，在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须包含有这个版本。当然如果其他插件需要其他版本，你可以同时安装其他多个版本）。然后还要勾选最底部的Android Support Repository.
SDK-Tools设置.png
-
配置ANDROID_HOME环境变量，SDK的安装目录
ANDROID_HOME环境变量.png
-
将Android SDK的Tools目录添加到PATH变量中
platform-tools配置.png
（六）安装Git
- 你可以使用Chocolatey来安装git，git的话是安卓开发基本必备的，这里安装就不多提了。
choco install git
- 也可到Git官方去下载。
（七）创建一个新的RN项目
原有项目嵌入RN模块，我会在学习完RN之后加进来，这里就只讨论创建一个新的RN项目。
-
1，在我的G盘里创建一个目录G:\reactnative-workspace，当作我RN所有项目的工作区间。
-
2，打开命令提示符窗口，进去该目录，执行如下命令，创建一个RN项目，项目名为ReactNativeNewProject。
react-native init ReactNativeNewProject
- 3，进入创建成功的ReactNative项目里，看看它的目录结构如下：
RN项目目录.PNG
-
4，电脑连上手机，打开USB调试，执行adb devices确定连接成功
-
5，执行以下命令，先进入我们的项目目录，然后启动项目
cd ReactNativeNewProject 进入项目目录
react-native run-android 启动这个项目
启动命令如下：
启动项目.png
在启动命令执行的过程中会自动启动node.js的服务，当底层检测我们的node.js服务未启动时会自动启动，我们也可以在启动我们项目命令(步骤5)之前通过下面的命令手动开启服务。
react-native start
启动成功后显示ready
Node服务器.PNG
- 6，启动项目成功后，手机会出现如下界面。在启动项目时，失败过一次，显示安装到手机上失败，我的解决办法是删除项目，重新执行2，3，4，5步骤，安装成功。
Screenshot_2018-01-16-16-53-20-025_com.reactnativenewproject.png
总结：
按照上面的步骤成功的把RN的环境搭建成功，可能在其中的步骤中会出现问题，百度一下应该都好解决，今天也是第一天认真的接触RN，后续学习也会对文章进行修改和补充。
网友评论