隨著Facebook開源ReactNative，目前越來越多的公司開始在項(xiàng)目中引入此開源框架，所以現(xiàn)在也加入到學(xué)習(xí)中來。
一 .環(huán)境配置
在mac上搭建React環(huán)境需要下面這些工具
Android Studio, node.js, the React Native command line tools, and Watchman.
首先來安裝 node 和Watchman
這里我是通過 Homebrew來安裝的，安裝很簡(jiǎn)單打開mac的終端將
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
這段粘貼到命令行中即可，等它安裝好了，就可以安裝node來
具體命令為
brew install node
同理Watchman也是同樣安裝命令為
brew install watchman
安裝好了以后就開始安裝 React Native command line tools
在這之前已經(jīng)安裝了node了，所以在這通node npm來安裝具體命令如下：
npm install -g react-native-cli
如果安裝失敗，提示權(quán)限錯(cuò)誤這時(shí)可以輸入下面命令
sudo npm install -g react-native-cli
如果的If you get error Cannot find module 'npmlog'
, 這個(gè)錯(cuò)誤
try this before: curl -0 -L http://npmjs.org/install.sh | sudo sh
.
接下來的話就是android開發(fā)環(huán)境的搭建我就不一一說了。
但是這個(gè)地方要注意的就是最后一定要設(shè)置環(huán)境變量：ANDROID_HOME，剛開始沒設(shè)置一直包找不到sdk錯(cuò)誤
export ANDROID_HOME=‘你的sdk的路徑’
如果上面這些都做完了就可以開始建立reactnative項(xiàng)目了
二 初始化項(xiàng)目
在終端中輸入
react-native init AwesomeProject
AwesomeProject為工程名字可以按自己需求去命名。初始化完成后就cd 進(jìn)入工程根目錄cd AwesomeProject
然后啟動(dòng)模擬器，真機(jī)的調(diào)試在后面介紹。啟動(dòng)后在終端輸入react-native run-android ，等待編譯完成后就可以在模擬器上看到
如果想對(duì)其進(jìn)行修改 就修改 index.android.js 文件，然后雙擊R健進(jìn)行重載，在模擬器上看到更新后的效果就是成功了。效果如下
三.Android 真機(jī)調(diào)試
第一次在真機(jī)上運(yùn)行直接報(bào)錯(cuò)了，bridge configuration isn't available" error ，看官網(wǎng)解決方案如下:
如果是 5.0 或者以上機(jī)型，可通過 adb 反向代理端口，將 Mac 端口反向代理到測(cè)試機(jī)上。
Run adb reverse tcp:8081 tcp:8081
如果 5.0 以下機(jī)器，通過react-native start --port [PORT] 啟動(dòng)Debug Server，然后應(yīng)用安裝到測(cè)試機(jī)上之后，搖動(dòng)設(shè)備，在彈出菜單中選擇 Dev Setting > Debug Server host for device，然后填入 Mac 的 IP 地址可以在wifi設(shè)置看也可通過ifconfig來看
這樣以后就可以在真機(jī)上調(diào)試了。
如果是想在之前項(xiàng)目基礎(chǔ)上引入reactnative 可 參照次文章
