新建項(xiàng)目時，確定你的環(huán)境已經(jīng)是正確的了。
截至到2016/3/1日，RN版本是0.20.0，目前創(chuàng)建新項(xiàng)目時RN默認(rèn)版本是0.20.0（3月2日已經(jīng)升級到0.21.0版本了），由于版本升級較快，可能會出現(xiàn)一些問題，多數(shù)是相關(guān)的依賴出現(xiàn)問題，升級到最新的就行了。具體解決方法參考文章尾部。
創(chuàng)建
// 創(chuàng)建新項(xiàng)目，項(xiàng)目名稱為Test
react-native init Test
// 注：創(chuàng)建時間會比較長，在下載相關(guān)的依賴。
// 建議切換npm的代源為國內(nèi)的地址。具體請看http://www.waylau.com/faster-npm/
在上述過程完成后。項(xiàng)目是可以執(zhí)行的了。
初始項(xiàng)目文件目錄如下：
目錄和文件說明：
-
android目錄是Android項(xiàng)目的目錄，里面有Android Studio項(xiàng)目環(huán)境文件。 -
ios目錄是iOS項(xiàng)目目錄，是XCode項(xiàng)目環(huán)境文件。 -
index.android.js是Android入口文件。 -
index.ios.js是iOS入口文件。 -
node_modules是項(xiàng)目的依賴包，基于node文件依賴系統(tǒng)產(chǎn)生的，該目錄中有react-native相關(guān)的依賴和其他的第三方lib -
package.json是項(xiàng)目依賴包的說明文件，列舉了依賴的包以及版本號等等信息。
執(zhí)行
iOS執(zhí)行方法：
- 通過命令執(zhí)行 （在
0.20.0的版本是可以的，** 老版本不支持 **）
react-native run-ios
// 注：該過程會自動打開命令行執(zhí)行react-native start（獲取jsbundle包的服務(wù)器） - 或通過XCode執(zhí)行
雙擊ios目錄中的Test.Xcodeproj文件，在打開Xcode開發(fā)環(huán)境之后，點(diǎn)擊Xcode的Run即可。
Android執(zhí)行方法：
// 第一步，開啟安卓模擬器，使模擬器成為可用狀態(tài)，或者連接真機(jī)，注意真機(jī)需要設(shè)置成調(diào)試模式。
adb devices
// 上述會列出當(dāng)前可以使用的設(shè)備，如果列表為空，則后續(xù)的無法運(yùn)行。
// 第二步，開啟一個命令行控制臺，進(jìn)入項(xiàng)目目錄
react-native start
// 上述命令是開啟jsbundle服務(wù)器，用于測試設(shè)備上Reload JS的服務(wù)器。
// 第三步, 再開啟一個新的命令行控制臺，進(jìn)入項(xiàng)目目錄
react-native run-android
** ios相關(guān)操作及運(yùn)行截圖如下：**
** android相關(guān)操作及運(yùn)行截圖如下：**
如果我們想在界面上顯示Hello world，可以簡單改下，分別修改index.ios.js和index.android.js的render函數(shù)返回的內(nèi)容。
比如說index.android.js原內(nèi)容是：
刷新手機(jī)界面，修改后的界面如下：
調(diào)試方法
iOS調(diào)試方法
- 1， ?-R (刷新應(yīng)用)
- 2， 安裝frappe，可以進(jìn)行Reload JS操作。（目前針對mac系統(tǒng)可以）
- 3，日志在xcode里可以看到輸出的日志
Android調(diào)試方法
- 1，在命令終端中輸入
adb shell input keyevent 82，會彈出Menu，然后點(diǎn)選Reload JS。 - 2，點(diǎn)擊真機(jī)的Menu虛擬鍵，也會彈出Menu窗口。
- 3，安裝frappe，可以進(jìn)行
Reload JS操作。（進(jìn)支持Mac系統(tǒng)） - 4，日志輸出：在命令終端輸入
adb logcat *:S ReactNative:V ReactNativeJS:V進(jìn)行監(jiān)聽
Windows中快捷啟動項(xiàng)目、監(jiān)聽日志、Reload JS等操作
具體請參看github上項(xiàng)目rn_android_bat，項(xiàng)目描述了快捷RN服務(wù)器快捷啟動方法、啟動項(xiàng)目、監(jiān)聽RN輸出日志、設(shè)備彈出RN操作框等操作。
新建項(xiàng)目運(yùn)行出錯解決方案
在項(xiàng)目運(yùn)行時，可能會出錯。以下是部分錯誤的解決辦法。
** A, unable to download js bundle. xxxx **
該問題可能是多種原因?qū)е碌?，解決方法如下：
- 1，** 確定設(shè)備已經(jīng)聯(lián)網(wǎng)**。如果未聯(lián)網(wǎng)，前先聯(lián)網(wǎng)。
- 2，先確定測試設(shè)備跟電腦是否在同一個局域網(wǎng)。如果沒有，請確保先在一個局域網(wǎng)內(nèi)。
- 3，確定
react-native start已經(jīng)正確執(zhí)行了。 該命令需要在項(xiàng)目的目錄中執(zhí)行才有效。 - 4，針對安卓設(shè)備，是否在
Dev Settings中的Debug server host & port for device中設(shè)置了地址。如果沒有請先設(shè)置。IP地址即是電腦地址，端口號在你沒改的情況下是8081。如果當(dāng)前電腦IP地址是192.168.1.114。那么應(yīng)該設(shè)置為192.168.1.114:8081。具體操作見文章底部。
** B, Can't find variable: __fbBatchedBridge ... **
該問題解決方法同A一樣。
**C, Could not connect to development server. **
同A
** D，Unknown option: /Users/user/Desktop/RNApp/node_modules/react-native/node_modules/react-transform-hmr/node_modules/react-proxy/node_modules/react-deep-force-update/.babelrc.stage **
該問題是依賴對于.babelrc的支持不統(tǒng)一。最新版本的RN已經(jīng)移除了.babelrc的配置。解決方法如下：
1，移除
node_modules/react-deep-force-update/.babelrc文件。 然后重起react-native start。
此方法也可以作為一個fix方法。如果還沒解決問題，請用方法2。-
2，更新相關(guān)的依賴，具體如下：
1), 修改node_modules/react-transform-hmr/package.json里的dependencies配置中的react-proxy版本為1.1.2
rm -rf node_modules/react-proxy/
npm install2), 修改node_modules/react-proxy/package.json里的dependencies配置中的react-deep-force-update版本為2.0.1 rm -rf node_modules/react-deep-force-update/ npm install //上述命令rm是Linux中的移除操作。如果是win下?？梢允褂肈EL和rd // win下: del xxfile //刪除xxfile文件 // win下: rd xxdir //刪除xxdir目錄
** E, 在react-native start時提示W(wǎng)atcher took too long to load **
該問題是程序watch文件時時間超時導(dǎo)致的?？梢孕薷淖畲蟮某瑫r時間。
- 修改
node_modules\react-native\packager\react-packager\src\FileWatcher\index.js中的MAX_WAIT_TIME為50000或者更大。
設(shè)置安卓測試設(shè)備上的代理。
Menu中有
Reload JS, Debug in Chrome, Enable Live Reload, Inspect Element, Enable Perf Monitor, Dev Settings。
如果需要設(shè)置代理地址的話，點(diǎn)擊Dev Settings。
點(diǎn)擊Debug server host & port for device，如下為我的配置：
推薦：
RNTools是一個分享React Native文章、實(shí)例代碼以及第三方模塊的平臺。RNTools官網(wǎng)鏈接 RNTools應(yīng)用下載
