facebook react native 開發-----win7,mac環境搭建實踐

開發環境搭建:英文不錯的可以參考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 IDE 全面介紹簡:http://www.cnblogs.com/jhj117/p/5611589.html

碰到坑時解決問題,上國外的網站可能比較慢,你需要修改host文件,mac下修改host可以參考:
http://www.liubingyang.com/like/host-google-mac.html

常用命令:

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.

在網上搜索答案,這個寫得詳細些:http://www.jianshu.com/p/82a09063e61c。
但是按照這個的說法覈對了app名字,也把命令行程序關閉,重新啓動了,還是報錯,搞了半天,最後是因爲在Atom中運行了一個程序沒有退出,導致的,把Atom關閉後再運行,就沒錯了。


========在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終端運行程序





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章