React Native 基本环境搭建
2016-06-22 本文已影响323人
娘亲Joanna
使用终端搭建react native iOS开发环境
1.安装Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
终端显示：
AppledeMac-mini-3:~ apple$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
It appears Homebrew is already installed. If your intent is to reinstall you
should do the following before running this installer again:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/uninstall)"
The current contents of /usr/local are appdata bin Cellar CODEOFCONDUCT.md etc include lib Library LICENSE.txt opt README.md share .git .github .gitignore
2.安装nvm和nodejs
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash
终端显示：
AppledeMac-mini-3:~ apple$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.26.1/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 7728 100 7728 0 0 5266 0 0:00:01 0:00:01 --:--:-- 5267
=> Downloading nvm from git to '/Users/apple/.nvm'
=> Cloning into '/Users/apple/.nvm'...
remote: Counting objects: 4732, done.
remote: Total 4732 (delta 0), reused 0 (delta 0), pack-reused 4731
Receiving objects: 100% (4732/4732), 1.27 MiB | 147.00 KiB/s, done.
Resolving deltas: 100% (2814/2814), done.
Checking connectivity... done.
* (HEAD detached at v0.26.1)
master
=> Appending source string to /Users/apple/.bashrc
=> You currently have modules installed globally with `npm`. These will no
=> longer be linked to the active version of Node when you install a new node
=> with `nvm`; and they may (depending on how you construct your `$PATH`)
=> override the binaries of modules installed with `nvm`:
/usr/local/lib
└── raml2html@2.4.0
=> If you wish to uninstall them at a later point (or re-install them under your
=> `nvm` Nodes), you can remove them from the system Node as follows:
$ nvm use system
$ npm uninstall -g a_module
=> You can now start using nvm
现在可以使用nvm指令了
要想额外的工作 必须加上如下指令就可以任意使用nvm指令了
. ~/.nvm/nvm.sh
AppledeMac-mini-3:~ apple$ . ~/.nvm/nvm.sh
安装nodejs和npm。npm用于nodejs包依赖管理的工具。
nvm install node && nvm alias default node
终端显示：
AppledeMac-mini-3:~ apple$ nvm install node && nvm alias default node
######################################################################## 100.0%
Checksums empty
Now using node v6.2.2 (npm v3.9.5)
default -> node (-> v6.2.2)
安装watchman
watchman是用于监听文件变化的工具，应该是用于监听文件变化，然后界面做出响应
brew install watchman
终端显示：
AppledeMac-mini-3:~ apple$ brew install watchman
==> Installing dependencies for watchman: pcre
==> Installing watchman dependency: pcre
==> Downloading https://homebrew.bintray.com/bottles/pcre-8.38.el_capitan.bottle
######################################################################## 100.0%
==> Pouring pcre-8.38.el_capitan.bottle.tar.gz
🍺 /usr/local/Cellar/pcre/8.38: 203 files, 5.4M
==> Installing watchman
==> Downloading https://homebrew.bintray.com/bottles/watchman-4.4.0.el_capitan.b
######################################################################## 100.0%
==> Pouring watchman-4.4.0.el_capitan.bottle.tar.gz
🍺 /usr/local/Cellar/watchman/4.4.0: 20 files, 343.7K
安装flow
brew install flow
AppledeMac-mini-3:~ apple$ brew install flow
==> Downloading https://homebrew.bintray.com/bottles/flow-0.23.0.el_capitan.bott
######################################################################## 100.0%
==> Pouring flow-0.23.0.el_capitan.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
/usr/local/etc/bash_completion.d
zsh completion has been installed to:
/usr/local/share/zsh/site-functions
==> Summary
🍺 /usr/local/Cellar/flow/0.23.0: 7 files, 6M
安装好环境 初始化react native环境
在我们要集成的项目中，进入到*.xcodeproj文件的上级目录，运行React Native初始化命令react-native init [Project Name] 会出现prompt, 输入yes,这样会在ios目录下生成一个同名工程。init过程会需要一点时间，耐心等待。
react-native init reactNative 命令之后
65D2BCDD-ECBD-4EBD-8F46-FDB04BCFCEE6.png
cd /Users/apple/Desktop/reactNative
（reactNative: 为你的iOS端工程的名称）
再执行以下指令
$ npm install -g react-native-cli
$ react-native init reactNative
$ cd /Users/apple/Desktop/reactNative
终端显示：
AppledeMac-mini-3:~ apple$ cd /Users/apple/Desktop/reactNative
AppledeMac-mini-3:reactNative apple$ npm install -g react-native-cli
/Users/apple/.nvm/versions/node/v6.2.2/bin/react-native -> /Users/apple/.nvm/versions/node/v6.2.2/lib/node_modules/react-native-cli/index.js
/Users/apple/.nvm/versions/node/v6.2.2/lib
└─┬ react-native-cli@1.0.0
├─┬ chalk@1.1.3
│ ├── ansi-styles@2.2.1
│ ├── escape-string-regexp@1.0.5
│ ├─┬ has-ansi@2.0.0
│ │ └── ansi-regex@2.0.0
│ ├── strip-ansi@3.0.1
│ └── supports-color@2.0.0
├── minimist@1.2.0
├─┬ prompt@0.2.14
│ ├── pkginfo@0.4.0
│ ├─┬ read@1.0.7
│ │ └── mute-stream@0.0.6
│ ├── revalidator@0.1.8
│ ├─┬ utile@0.2.1
│ │ ├── async@0.2.10
│ │ ├── deep-equal@1.0.1
│ │ ├── i@0.3.5
│ │ ├─┬ mkdirp@0.5.1
│ │ │ └── minimist@0.0.8
│ │ ├── ncp@0.4.2
│ │ └─┬ rimraf@2.5.2
│ │ └─┬ glob@7.0.5
│ │ ├── fs.realpath@1.0.0
│ │ ├─┬ inflight@1.0.5
│ │ │ └── wrappy@1.0.2
│ │ ├── inherits@2.0.1
│ │ ├─┬ minimatch@3.0.2
│ │ │ └─┬ brace-expansion@1.1.5
│ │ │ ├── balanced-match@0.4.1
│ │ │ └── concat-map@0.0.1
│ │ ├── once@1.3.3
│ │ └── path-is-absolute@1.0.0
│ └─┬ winston@0.8.3
│ ├── colors@0.6.2
│ ├── cycle@1.0.3
│ ├── eyes@0.1.8
│ ├── isstream@0.1.2
│ ├── pkginfo@0.3.1
│ └── stack-trace@0.0.9
└── semver@5.1.0
AppledeMac-mini-3:reactNative apple$ react-native init reactNative
prompt: Directory reactNative already exists. Continue?: (no) yes
This will walk you through creating a new React Native project in /Users/apple/Desktop/reactNative/reactNative
Installing react-native package from npm...
Setting up new React Native app in /Users/apple/Desktop/reactNative/reactNative
reactNative@0.0.1 /Users/apple/Desktop/reactNative/reactNative
└── react@15.1.0
To run your app on iOS:
cd /Users/apple/Desktop/reactNative/reactNative
react-native run-ios
- or -
Open /Users/apple/Desktop/reactNative/reactNative/ios/reactNative.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd /Users/apple/Desktop/reactNative/reactNative
react-native run-android
AppledeMac-mini-3:reactNative apple$ open /Users/apple/Desktop/reactNative
AppledeMac-mini-3:reactNative apple$ open /Users/apple/Desktop/reactNative/reactNative.xcodeproj
AppledeMac-mini-3:reactNative apple$
~/Desktop/reactNative/reactNative/node_modules/react-native/packager ~
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
/Users/apple/Desktop/reactNative/reactNative
[11:25:27] <START> Building Dependency Graph
[11:25:27] <START> Crawling File System
[Hot Module Replacement] Server listening on /hot
React packager ready.
[11:25:29] <END> Crawling File System (1422ms)
[11:25:29] <START> Building in-memory fs for JavaScript
[11:25:29] <END> Building in-memory fs for JavaScript (142ms)
[11:25:29] <START> Building in-memory fs for Assets
[11:25:29] <END> Building in-memory fs for Assets (134ms)
[11:25:29] <START> Building Haste Map
[11:25:29] <START> Building (deprecated) Asset Map
[11:25:29] <END> Building (deprecated) Asset Map (72ms)
[11:25:29] <END> Building Haste Map (570ms)
[11:25:29] <END> Building Dependency Graph (2292ms)
[11:26:06] <START> request:/index.ios.bundle?platform=ios&dev=true
[11:26:06] <START> find dependencies
transformed 606/606 (100%)
[11:26:20] <END> find dependencies (14252ms)
[11:26:23] <END> request:/index.ios.bundle?platform=ios&dev=true (17215ms)
从以下路径打开你创建的同名react native 就可以使用react native 开发了
F83F1894-4598-49C6-8A5C-8125999588CB.png
8B578711-859D-4DED-B416-80F107020116.png
