React Native教程:一步一步搭建React Native开发环境

育知同创官网：

React Native教程：一步一步搭建React Native开发环境

1 环境搭建

工欲善其事，必先利其器。首先，我们需要搭建开发环境(我们以后的文章和视频均是以Mac OS X系统为基础)。React Native主要依赖以下环境。

Mac OS X操作系统。

推荐使用Xcode 7.3.0或者更高版本。

安装 v6.2.1或者最新版本。

利用Homebrew安装watchman和flow。

安装React Native

安装NVM

创建第一个HelloWorld程序

下面我们一步步来安装开发环境。

•

•

•

•

•

•

•

1.1 安装Xcode

打开Mac电脑，打开App Store，在App Store中搜索Xcode，双击Xcode，输入apple

id下载安装即可。

1.2 安装

官网：

打开官网：

育知同创官网：

下载v6.2.1版本，下载完成以后双击包进行安装。

从上图中中This package will install v6.2.1 and nam v3.9.3 into

/usr/local/.这句话表明我们将会安装 v6.2.1和npm 3.9.3版本.

育知同创官网：

育知同创官网：

育知同创官网：

上图表示和npm都是安装在/usr/local/bin/路径下面。

1.3 利用Homebrew安装watchman和flow

育知同创官网：

打开终端，按照如下操作即可.

育知同创官网：

接下来通过brew安装watchman和flow.

现在万事具备，只欠东风。我们通过npm安装react-native-cli的命令行工具。在mac终端中输入如下命令，其中-g表示全局安装。

育知同创官网：

1.4 NVM安装

bogon:Desktop lucien$ git clone /creationix/nvm

Cloning into ‘nvm’…

remote: Counting objects: 4718, done.

remote: Compressing objects: 100% (6/6), done.

remote: Total 4718 (delta 1), reused 0 (delta 0), pack-reused 4712

Receiving objects: 100% (4718/4718), 1.26 MiB | 85.00 KiB/s, done.

Resolving deltas: 100% (2802/2802), done.

Checking connectivity… done.

bogon:Desktop lucien$ cd nvm/

bogon:nvm lucien$ ls

育知同创官网：

wn nvm-exec test

bash_completion update_test_

Makefile

bogon:nvm lucien$ source

bogon:nvm lucien$ nvm

Node Version Manager

Note: refers to any version-like string nvm understands. This

includes:

– full or partial version numbers, starting with an optional “v” (0.10,

v0.1.2, v1)

– default (built-in) aliases: node, stable, unstable, iojs, system

– custom aliases you define with `nvm alias foo`

Usage:

nvm –help Show this

message

nvm –version Print out the

latest released version of nvm

nvm install [-s] Download and install

a , [-s] from source. Uses .nvmrc if available

–reinstall-packages-from= When installing, reinstall

packages installed in

nvm uninstall Uninstall a version

nvm use [–silent] Modify PATH to use

. Uses .nvmrc if available

nvm exec [–silent] [] Run on .

Uses .nvmrc if available

育知同创官网：

nvm run [–silent] [] Run `node` on with

as arguments. Uses .nvmrc if available

nvm current Display

currently activated version

nvm ls List

installed versions

nvm ls List versions

matching a given description

nvm ls-remote List remote

versions available for install

nvm ls-remote List remote

versions available for install, matching a given

nvm version Resolve the given

description to a single local version

nvm version-remote Resolve the given

description to a single remote version

nvm deactivate Undo effects

of `nvm` on current shell

nvm alias [] Show all aliases

beginning with

nvm alias Set an alias named

pointing to

nvm unalias Deletes the

alias named

nvm reinstall-packages Reinstall global `npm`

packages contained in to current version

育知同创官网：

nvm unload Unload

`nvm` from shell

nvm which [] Display path to

installed node version. Uses .nvmrc if available

Example:

nvm install v0.10.32

version number

nvm use 0.10

available 0.10.x release

nvm run 0.10.32

v0.10.32

nvm exec 0.10.32 node

PATH pointing to node v0.10.32

nvm alias default 0.10.32

a shell

Note:

to remove, delete, or uninstall nvm –(usually `~/.nvm`)

bogon:nvm lucien$ nvm ls -remote

N/A

bogon:nvm lucien$ nvm ls

-> v6.2.1

system

default -> node (-> v6.2.1)

node -> stable (-> v6.2.1) (default)

stable -> 6.2 (-> v6.2.1) (default)

iojs -> N/A (default)

Install a specific

Use the latest

Run using node

Run `node ` with the

Set default node version on

remove the `$NVM_DIR` folder

just

育知同创官网：

bogon:nvm lucien$

1.5 创建项目

搭建好RN环境以后，我们来创建一个HelloWorld项目。见终端。

1.6 运行项目

育知同创官网：

Command ＋ R运行

接下来关闭Xcode，注意：不要关闭终端和模拟器，用Sublime打开，编辑，保存，选中模拟器，重新按Command＋R运行即可，无需重新打开Xcode运行。

育知同创官网：

本资料由育知同创教育整理，版权所有，翻版必究