2024年5月30日发(作者：)
育知同创官网：
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:
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]
from source. Uses .nvmrc if available
–reinstall-packages-from=
installed in
nvm uninstall
nvm use [–silent]
Uses .nvmrc if available
nvm exec [–silent]
育知同创官网：
Uses .nvmrc if available
nvm run [–silent]
nvm current
nvm ls
nvm ls
description
nvm ls-remote
nvm ls-remote
install, matching a given
nvm version
single local version
nvm version-remote
single remote version
nvm deactivate
Display currently activated version
List installed versions
List versions matching a given
List remote versions available for install
List remote versions available for
Resolve the given description to a
Resolve the given description to a
Undo effects of `nvm` on current shell
育知同创官网：
nvm alias [
nvm alias
pointing to
nvm unalias
nvm reinstall-packages
contained in
nvm unload Unload `nvm` from shell
nvm which [
version. Uses .nvmrc if available
Example:
nvm install v0.10.32 Install a specific version number
nvm use 0.10 Use the latest available 0.10.x release
nvm run 0.10.32 Run using node v0.10.32
nvm exec 0.10.32 node Run `node ` with the PATH
育知同创官网：
pointing to node v0.10.32
nvm alias default 0.10.32 Set default node version on a shell
Note:
to remove, delete, or uninstall nvm – just remove the `$NVM_DIR` folder
(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)
育知同创官网：
bogon:nvm lucien$
1.5 创建项目
搭建好RN环境以后，我们来创建一个HelloWorld项目。见终端。
1.6 运行项目
育知同创官网：
Command ＋ R运行
接下来关闭Xcode，注意：不要关闭终端和模拟器，用Sublime打开，
编辑，保存，选中模拟器，重新按Command＋R运行即可，无需重新打开Xcode运行。
育知同创官网：
育知同创官网：
本资料由育知同创教育整理，版权所有，翻版必究
发布评论