2017-06-04

| React Native

早就听说RN了，一直想去了解下，正好最近有空就来学习下并在博客里记录下自己的学习所得，不对之处望大家指出。

什么是React Native

React Native 诞生于2015年，是一套跨平台、动态更新的JavaScript框架，号称：Learn once, write anywhere：Build mobile apps with React！
学习资料：React Native中文网
话不多说，正式进入开发环境的搭建吧。

在 Windows 平台上开发 React Native 需要安装以下环境和工具：

• Node.js
• Android Studio

安装Node.js

React Native 开发需要用到Node.js环境。我们做 React Native 开发会经常性的和 Node.js 进行打交道。

安装 Node.js 有两种常见的方法：

1. 一种是通过Windows包管理工具Chocolatey来安装。
   看官网就觉得这种方法太复杂了，就没用。
2. 第二种就是直接去Node.js官网下载安装包来进行安装。

接下来我们来介绍下第二种方法吧。

下载Node.js
如图
下载完成后，双击下载好的.msi文件安装即可，安装完成后，win+R，输入cmd打开终端，输入

1

npm -v

即可查看当前的Node.js版本

安装React Native命令行工具

安装好了node.js，我们通过

1

npm install

来安装React Native命令行工具了。
win+R，输入cmd打开终端，输入并执行下面命令即可

1

npm install -g recat-native-cli

图我没有，只好盗用Windows平台搭建React Native开发环境的图了

安装Android Studio

这个就不说了吧，烂大街了都。。。。

好了，这样环境搭建好了，我们来试着创建第一个React Native 应用吧

创建第一个React Native应用

win+R，输入cmd打开终端，输入并执行下面命令

1
2
3

react-native init <项目名字>
如：
react-native init FirstApp

如图

项目结构如图

其中 android目录是Android项目。

React Native应用创建完成之后便可以运行它了，运行一个React Native应用通常有两种方式：

1. 通过React Native命令行工具
   win+R，输入cmd打开终端，输入并执行下面命令即可

1
2
3

react-native run-android
//如果要运行iOS项目则通过下面命令
react-native run-ios

1. 通过AndroidStudio运行我们的项目
   将目录里的android目录导入AS中即可。

1
2
3

这里有个问题就是导入的时候注意下gradle的版本问题。
可以去项目的gradle->wrapper->gradle-wrapper修改
还有就是导入的过程可能会比较漫长。

运行成功后如图

参考：
Windows平台搭建React Native开发环境