Learn Once ,Write Anywhere —— 从零开始学习React Native（一）搭建环境

Learn Once ,Write Anywhere —— 从零开始学习React Native（一）搭建环境

React Native是Facebook 开源的 一款使用 JavaScript 与 React 开发原生应用的框架，最早只支持IOS，去年年底开始支持Android，跟原生应用相比RN支持热更新方便迭代，并且跨平台提高开发效率；跟H5/Hybrid相比，RN用的是原生组件，用户体验好。要说缺点的话，就是出现时间短，普及度不高，某些库的支持比较死板等等。

最早知道React Native是在上海的一次安卓技术交流会上，几位大神对此技术极为推崇，再加上FaceBook的光环加持，给当时虽然没听太懂的我留下了很深的印象。

第二次是在微博的一次活动上，破天荒的居然让我中了一个参与奖，奖品就是这本书：



这下想不学都不行了，那就来吧。

周末忙里偷闲，总算腾出来点时间。打算在Windows上先把环境搭起来（Linux版打算等电脑升级了再补上）。

参照React Native中文论坛上面的教程，首先要安装一个Windows上的包管理器Chocolatey（类似于Ubantu上的apt-get），以管理员运行PowerShell（下面的命令也一样），键入如下命令：

iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))

看样子应该就是下载组件包，运行脚本（配置编译环境，添加依赖，编译，拷贝，配置环境变量）吧。

运行到最后，报错了：

“无法加载文件 install.ps1，因为在此系统中禁止执行脚本。有关详细信息，请参阅…..“

网上查了下，说是Windows PowerShell 执行策略的问题。默认是 “Restricted” (执行策略不允许任何脚本运行)。若要在本地计算机上运行用户自己编写的未签名脚本和来自其他用户的签名脚本，要使用以下命令将计算机上的执行策略更改为 RemoteSigned：

set-executionpolicy remotesigned

键入上述命令后，再运行install.ps1，就可以了。

之后是要使用Chocolatey来安装Python 2：

choco install python2

使用Chocolatey来安装NodeJS：

choco install nodejs.install

使用npm来安装React Native命令行工具（用于执行创建、初始化、更新项目、运行打包服务（packager）等任务）：

npm install -g react-native-cli

接下来是AndroidStudio的部分：

需要AS升级至2.0或以上；

需要JDK1.8；

需要配置ANDROID_HOME环境变量：Android SDK；

配置Android SDK的tools和platform-tools的环境变量（可选）；

在完成这些以后就可以尝试创建你的第一个React Native Project了：

在指定路径下，执行以下命令：

react-native init MyFirstProject

等待一会儿，如图所示：



创建成功！

根据提示，需要开启模拟器或是USB连接设备，这里选择真机运行：

别忘了开启手机的USB调试选项，连接上后，命令行键入：

adb devices

（前提是你已经配置了platform-tools的环境变量）

正常的话，会看到如下结果：



说明你的设备连接正常了。接着，键入如下命令：

cd MyFirstProject
react-native run-android

等了一会儿，发现报错：



笔者在这里一度很困惑，网上也没查到相关资料。最后灵机一动，想起系统版本的问题。

好像RN在Android5.0以下的真机上运行会有问题，而笔者一开始用的是4.4的机子，最后换成6.0的，再次运行：



成功了！虽然刚才那个问题还没想通。。。

这次先到这里，下次我们尝试往项目里添加一些UI来看看效果。