1 环境搭建



React Native主要依赖以下环境。

  • Mac OS X操作系统。


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

  • 安装Node.js v6.2.1或者最新版本。
  • 利用Homebrew安装watchman和flow。
  • 安装React Native
  • 安装NVM
  • 创建第一个HelloWorld程序

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

1.1 安装Xcode



打开App Store,在App Store中搜索Xcode,双击Xcode,输入apple id下载安装即可。

 


 

1.2  安装Node.js



Node.js官网:https://nodejs.org

打开Node.js官网:


reactnative环境检查 Android SDK报错 react native开发环境_sed

下载v6.5.0版本,下载完成以后双击node-v6.5.0.pkg包进行安装。


reactnative环境检查 Android SDK报错 react native开发环境_sed_02

v6.5.0和npm v3.10.3版本.


reactnative环境检查 Android SDK报错 react native开发环境_List_03

reactnative环境检查 Android SDK报错 react native开发环境_React-Native环境搭建_04


reactnative环境检查 Android SDK报错 react native开发环境_React-Native环境搭建_05

reactnative环境检查 Android SDK报错 react native开发环境_List_06

reactnative环境检查 Android SDK报错 react native开发环境_React-Native环境搭建_07


reactnative环境检查 Android SDK报错 react native开发环境_List_08

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

1.3 利用Homebrew安装watchman和flow




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


reactnative环境检查 Android SDK报错 react native开发环境_ci_09


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


reactnative环境检查 Android SDK报错 react native开发环境_sed_10

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


1.4 NVM安装



bogon:Desktop lucien$ git clone https://github.com/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
 CONTRIBUTING.md README.markdown nvm-exec test
 LICENSE.md bash_completion nvm.sh update_test_mocks.sh
 Makefile install.sh package.json
bogon:nvm lucien$ source nvm.sh 
bogon:nvm lucien$ nvm
 Node Version Manager
 Note: <version> 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] <version>                Download and install a <version>, [-s] from source. Uses .nvmrc if available
 –reinstall-packages-from=<version>     When installing, reinstall packages installed in <node|iojs|node version number>
 nvm uninstall <version>                   Uninstall a version
 nvm use [–silent] <version>              Modify PATH to use <version>. Uses .nvmrc if available
 nvm exec [–silent] <version> [<command>] Run <command> on <version>. Uses .nvmrc if available
 nvm run [–silent] <version> [<args>]     Run `node` on <version> with <args> as arguments. Uses .nvmrc if available
 nvm current                               Display currently activated version
 nvm ls                                    List installed versions
 nvm ls <version>                          List versions matching a given description
 nvm ls-remote                             List remote versions available for install
 nvm ls-remote <version>                   List remote versions available for install, matching a given <version>
 nvm version <version>                     Resolve the given description to a single local version
 nvm version-remote <version>              Resolve the given description to a single remote version
 nvm deactivate                            Undo effects of `nvm` on current shell
 nvm alias [<pattern>]                     Show all aliases beginning with <pattern>
 nvm alias <name> <version>                Set an alias named <name> pointing to <version>
 nvm unalias <name>                        Deletes the alias named <name>
 nvm reinstall-packages <version>          Reinstall global `npm` packages contained in <version> to current version
 nvm unload                                Unload `nvm` from shell
 nvm which [<version>]                     Display path to installed node 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 app.js                Run app.js using node v0.10.32
 nvm exec 0.10.32 node app.js          Run `node app.js` 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
 bogon:nvm lucien$

1.5  创建项目



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


reactnative环境检查 Android SDK报错 react native开发环境_List_11

1.6 运行项目



Command + R运行

接下来关闭Xcode,注意:不要关闭终端和模拟器,用Sublime打开index.ios.js,编辑,保存,选中模拟器,重新按Command+R运行即可,无需重新打开Xcode运行。


reactnative环境检查 Android SDK报错 react native开发环境_ci_12

reactnative环境检查 Android SDK报错 react native开发环境_List_13