React Native 探索（一）环境搭建与 Hello World（Windows/Mac）

1.配置React Native

首先我们要先来安装一些软件，如下所示。

Chocolatey/Homebrew
Windows 平台安装 Chocolatey：
Chocolatey 是一个 Windows 上的命令行包管理器，安装了 Chocolatey 就可以通过命令行来安装一些我们需要软件。我们打开 cmd 命令行程序使用如下命令即可。

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

Mac 平台安装 Homebrew：
在 Mac 上则需要安装 Homebrew，它和 Chocolatey 的作用是一样的，在终端输入如下命令即可。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 

我的 Mac 系统版本是10.11.6，安装过程中会提示按下 return 键，这时按下 return 键会提示输入系统密码，输入密码后会显示安装成功。
Python 2
Windows 平台安装 Python 2：
安装完 Chocolatey 就可以在命令行程序使用 Chocolatey 来安装 Python 2。

choco install python2

Mac 系统中自带 Python 的执行环境，因此不需要安装 Python 2。
当然我们也可以直接 Python 官网去下载安装，下载地址为https://www.python.org/downloads/
这里我的 Windows 平台的 Python 版本为2.7.10。

Node.js
Windows 平台安装 Node.js：

choco install nodejs.install

Mac 平台安装 Node.js：

brew install node

同样的也可以去 Node.js 官网去下载安装，地址为https://nodejs.org/en/。
这里我的 Windows 平台的 Node.js 版本为7.8.0。Windows 平台关掉 cmd 命令提示符窗口，打开 Node.js command prompt（Node.js命令提示符窗口），输入如下语句来设置 npm 镜像以加速后面的过程，Mac 平台在终端输入即可：

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 和 react-native-cli，Yarn 是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。react-native-cli 则用于执行 React Native 的创建、初始化、更新项目、运行打包服务（packager）等任务。在Windows 或者Mac 平台输入如下语句来安装它们。

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

2.配置 Android Studio

这里假设你是一个 Android 开发者并且已经安装了 Android Studio，我们要确保 SDK 安装正确，打开 Android Studio的 SDK Manager，在 SDK Platforms 窗口中勾选 Show Package Details，并确保已经安装了下图打勾的选项。

接下来在 SDK Tools 窗口中勾选 Show Package Details，在 Android SDK Build Tools 列表中勾选23.0.1，勾选最底部的 Android Support Repository。

3.使用 React Native 创建并运行项目

接下来我们创建和运行项目，在 Windows 或者 Mac 平台的命令提示符窗口进入需要存储 React Native 项目的文件目录，输入如下语句来创建项目：

react-native init firstProject 

这时会在存储文件中生成名为 firstProject 的项目文件，我们用 Android Studio 加载 firstProject 文件中 android 文件。
接下来运行 SDK 的模拟器，这里我的模拟器为 Android 6.0 版本的 Nexus6。最后输入如下命令来将 React Native 项目运行到模拟器中：

cd firstProjectreact-native run-android 

这时模拟器运行效果如下图所示。

这时我们可以通过连续两次按下键盘的R键来刷新界面来查看你的最新修改。通过摇动手机（真机）或者按下menu键(CTRL+M/⌘+M)来进入 React Native 的开发者选项。
关于模拟器这里建议使用 Genymotion，它所占用的内存要远小于 SDK 自带的模拟器。

4.Hello World

我们将 index.android.js 文件的代码清空并加入如下代码。

import React, { Component } from 'react';//1
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {//2
  render() {
    return (
      <Text>Hello world</Text>//3
    );
  }
}
AppRegistry.registerComponent('firstProject', () => HelloWorldApp);//4

这段代码是 ES6 编写的，ES6是 JavaScript 语言的下一代标准。不了解的同学可以买一本阮一峰的《ES 6标准入门》，电子书地址为http://es6.ruanyifeng.com/。
在注释1处做了两件事，一是为 react 组件指定默认的输出，并命名为 React，二是从 react 组件中导入 Component 变量。
注释2处定义了 HelloWorldApp 组件并继承自 Component ，接着在 render 方法中 return 了注释3处的内容，这是一种在 JavaScript 中嵌入 XML 结构的语法，叫做 JSX，JSX 编写的内容会显示在界面中。注释4处用 AppRegistry 模块来告知 React Native 哪一个组件被注册为整个应用的根容器。
接着我们连续两次按下键盘的R键来刷新界面，这样 ”Hello world” 就显示在界面中。

本作品采用《CC 协议》，转载必须注明作者和本文链接