開發環境搭建:英文不錯的可以參考facebook官方文檔:http://facebook.github.io/react-native/docs/getting-started.html
不想看英文的,有中文翻譯版本:http://reactnative.cn/docs/0.31/getting-started.html
開發環境分爲windows和mac,還有linux,我試着在win7下搭建開發環境,遇到不少坑,然後搜索解決方案,答案基本都適合mac環境。所以果斷換了mac環境。按照說明搭建mac環境很順暢。所以建議還是用mac來開發比較好。因爲facebook開發react native的團隊就是用mac來開發的,只是後來移植到了windows。
環境搭好後,還需要安裝開發IDE。不然用記事本來編輯程序,效率是大N折的。各種IDE介紹參看下面鏈接:
常用命令:
react-native init 創建一個指定名字的應用
react-native run-ios 建好工程後運行。
運行了兩個demo時沒啥問題,再次自己創建了一個工程,然後運行時報錯:
Invariant Violation:Applicaction 項目名 has not been registered.This is either due to a require() error during initialization or failure to call AppRegistry.registerCommponent.
========在Android真機運行========
輸入命令react-native run-android 就可以在真機運行,你可能會遇到以下兩個錯誤:
一:could not get batchedBridge ,make sure your bundle is packaged properly
在命令行運行命令:adb reverse tcp:8081 tcp:8081。或者在手機上打開dev settings ,填入你的電腦ip地址和端口,例如:10.0.0.11:8081.
二:com.android.ddmlib.AdbCommandRejectedException: device unauthorized. 這個錯誤可能是因爲你的手機沒有對Debug授權,在Android手機上設置下應該能解決:
設置方法:手機-設置-應用程序-開發-usb調試關閉,再打開一次
三:java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
這個問題是因爲你的Android 開發環境變量沒有設置,設置方法如下:
1.啓動Terminal終端工具
2.輸入cd ~/ 進入當前用戶的home目錄
3. 創建bash_profile文件,命令如下:
$touch .bash_profile
4.打開並編輯,命令如下:
$open -e .bash_profile
5、在文件中寫入以下內容,設置環境變量,下面第一行爲你的Android adk的路徑,不知道的話,在Android Studio軟件的 file/Project Structrue.../SDK Location 中有sdk的路徑,copy即可
export ANDROID_HOME=/Users/apple/Library/Android/sdk
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
6,保存並退出,關閉Terminal終端。
7,測試環境變量設置成功否:重啓Terminal終端,輸入以下命令試試:
$adb version
如果顯示adb的版本號,那麼就成功了,再次運行react-native run-android試試真機效果吧
真機調試小技巧:
搖一搖你的手機,在出來的菜單裏選"Dev Settings",然後點擊最下面的"dev Seting \ Debug server host & port for device",填入裏電腦的ip:8081
命令行:adb shell input keyevent 82可以代替搖一搖。
========在Android模擬器運行========
請參考我的另一篇blog:mac環境下在Android終端運行程序