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官網:
下載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
打開終端,按照如下操作即可.
接下來通過brew安裝watchman和flow.
現在萬事具備,只欠東風。我們通過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 (default)
bogon:nvm lucien$
1.5 創建項目
搭建好RN環境以後,我們來創建一個HelloWorld項目。見終端。
1.6 運行項目
Command + R運行
接下來關閉Xcode,注意:不要關閉終端和模擬器,用Sublime打開index.ios.js,編輯,保存,選中模擬器,重新按Command+R運行即可,無需重新打開Xcode運行。