React native环境搭建

 最近公司项目做了两款多开版微信的及时聊天系统，项目中使用到了vue.js 感觉这种单页用vue简直太方便了。同时手上也有几个安卓项目，又一直听说react是前端现在最火的语言，于是打算了解下其使用方式和应用场景。

  首先我们来看环境搭建：

安装

必需的软件

Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。 你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：

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

一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。译注：chocolatey的网站可能在国内访问困难，导致上述安装命令无法正常完成。请使用稳定的翻墙工具。 如果你实在装不上这个工具，也不要紧。下面所需的python2和nodejs你可以分别单独去对应的官方网站下载安装即可。

Python 2

打开命令提示符窗口，使用Chocolatey来安装Python 2.

注意目前不支持Python 3版本。

choco install python2

Node

打开命令提示符窗口，使用Chocolatey来安装NodeJS。

choco install nodejs.install

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

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

Yarn、React Native的命令行工具（react-native-cli）

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

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

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

可以看见，巧克力是个很方便的工具包，基本都是一键安装，（只是国内的网真的无力吐槽，求稳定VPN，最好不要太贵。）

以上部分全部在cmd命令行执行就行了。

Android Studio

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到 官网上下载。 或是使用包管理器来安装（比如choco install jdk8或是 apt-get install default-jdk）

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

• 确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。

• 在初步安装完成后，选择Custom安装项：

查看了下已有的android studio 是符合标准的 于是开始下一步。

推荐安装的工具

Gradle Daemon

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

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

测试安装

react-native init xzytestcd xzytestreact-native run-android

执行安装命令时，差点以为我中了毒！！

这里需要等上一段时间。

执行到这里就执行完了。我们去看看react native初始化的文件。

进入到目录我们可以看见创建了这样的一个结构。和nodejs比较类似。node_moudules下则是引用的包。

运行后看见开启了node的8081端口，并且在下载gredle（这个是安卓中觉得很恶心的一个东西，不会自动识别系统里的gredle包，而且每个版本需要单独下，最最最主要的是 下载真心很慢！！！）

我们先看看8081端口。显示react native包在运行中。

那么我们稍等一会 等待恶心的gredle下载完成。

下了很长时间终于下完了。开始构建项目

运行的时候报错了，发现没有安卓androidSDK23 于是开始安装

安装好以后可以看见我们的程序运行起来了。

现在我们进入到index.android.js 随便改几行代码试试

然后再次运行生成命令，就可以看见apk的效果了。现在我们来看看index.android.js的代码结构

这部分是react的初始化

下面可以统一定义 样式名称，有木有觉得很方便，不用在res里面定义好多文件啦啦啦。感觉有一种css的感觉了。

程序主体区域使用的是标签类语言，类似与HTML XML之类的。和android差不多基本以view  text等等来命名。

好了，第一步初步认识react native到此为止，下一章将会讲解更深入的，js与android如何实现native交互。