一步一步搭建ReactNative開發環境(Mac)

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下載安裝即可。

 

xcode安裝

 

1.2  安裝Node.js

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

打開Node.js官網:


下載v6.5.0版本,下載完成以後雙擊node-v6.5.0.pkg包進行安裝。


從上圖中中This package will install Node.js v6.5.0 and nam v3.10.3 into /usr/local/.這句話表明我們將會安裝Node.js v6.5.0和npm v3.10.3版本.




上圖表示Node.js和npm都是安裝在/usr/local/bin/路徑下面。

1.3 利用Homebrew安裝watchman和flow

屏幕快照 2016-06-08 下午3.47.56

打開終端,按照如下操作即可.


homebrew22

接下來通過brew安裝watchman和flow.


現在萬事具備,只欠東風。我們通過npm安裝react-native-cli的命令行工具。在mac終端中輸入如下命令,其中-g表示全局安裝。

屏幕快照 2016-06-08 下午5.11.31

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 (default)

bogon:nvm lucien$

1.5  創建項目

搭建好RN環境以後,我們來創建一個HelloWorld項目。見終端。

屏幕快照 2016-06-08 下午5.16.36

1.6 運行項目

屏幕快照 2016-06-08 下午5.20.24

Command + R運行

接下來關閉Xcode,注意:不要關閉終端和模擬器,用Sublime打開index.ios.js,編輯,保存,選中模擬器,重新按Command+R運行即可,無需重新打開Xcode運行。

001

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章