React Native+Android環境搭建和開發配置(Mac)

React Native+Android環境搭建和開發配置(Mac)

 

一.必須的軟件安裝

 

1.Homebrew安裝,Homebrew,Mac系統的包管理器,用於安裝NodeJS和一些其他必需的工具軟件。

命令行安裝:

 

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

譯註:在Max OS X 10.11(El Capitan)版本中,homebrew在安裝軟件時可能會碰到/usr/local目錄不可寫的權限問題。可以使用下面的命令修復:

命令行輸入:

 

sudo chown -R `whoami` /usr/local

 

Homebrew官網安裝教程:點擊打開鏈接

如果安裝有問題還可以參考:點擊打開鏈接(有Win和Mac的安裝)

 

2.Node安裝:使用Homebrew來安裝Node.js.

React Native需要NodeJS 4.0或更高版本。本文發佈時Homebrew默認安裝的是6.x版本,完全滿足要求。

命令行安裝:

 

brew install node

 

安裝完Node之後,爲了保證速度,需要使用淘寶鏡像,命令如下:

 

(1)npm config set registry "http://registry.npm.taobao.org"
(2)npm config listREact 可以查看配置

 

node.js官網:點擊打開鏈接

 

3.React Native安裝,

React Native的命令行工具(react-native-cli),用於執行創建、初始化、更新項目、運行打包服務(packager)等任務。

命令行安裝:

 

npm install -g react-native-cli

 

如果你看到EACCES: permission denied這樣的權限報錯,那麼請參照上文的homebrew譯註,修復/usr/local目錄的所有權:

命令行輸入:

 

sudo chown -R `whoami` /usr/local

 

英文官網點擊打開鏈接

中文官網點擊打開鏈接

 

4.Watchman 推薦安裝的工具,Watchman是由Facebook提供的監視文件系統變更的工具。安裝此工具可以提高開發時的性能(packager可以快速捕捉文件的變化從而實現實時刷新)。

命令行安裝:

 

brew install watchman

 

 

5.Java安裝,(你可以直接下載安裝,但是個人推薦使用brew安裝)

命令行安裝:

 

brew install Caskroom/versions/java6 這裏安裝的是Java6,可以使用相同的方式安裝java7

 

 

二、Android環境變量配置

 

1.在終端中輸入命令,進入用戶目錄。我的是/Users/panca/

 

$cd ~  

 

 

2.然後輸入命令,該命令的作用是如果不存在.bash_profile文件,則創建該文件

 

$touch .bash_profile  

 

 

 

3.然後輸入命令,該命令的作用是用文本編輯器TextEdit打開.bash_profile文件。如果你是第一次配置環境變量,則該文檔應該是空的。

 

$open -e .bash_profile 

 

 

4.複製下面的到文件中,主要修改sdk目錄

 

export ANDROID_HOME=/Users/baidu/as/sdk  
export PATH=${PATH}:${ANDROID_HOME}/tools  
export PATH=${PATH}:${ANDROID_HOME}/platform-tools 

 

 

5.測試(可能需要重啓)

 

測試adb命令:$adb version 顯示版本
測試android命令:$android  彈出Android Sdk Manager

 

 

win配置參考:點擊打開鏈接

win配置完成之後,如果在之後,在運行adb時,提示adb不是內部或外部命令,

也不是可運行的程序或批量文件。大家就在環境變量,path中,直接附上

路徑:D:\Android環境搭建相關文檔\第二個 eclipse\adt-bundle-win

dows-x86_64-20140702\sdk\platform-tools

注意:tools目錄運行android命令,platform-tools目錄運行adb命令

 

 

三、WebStorm下載和配置

1.WebStorm官網地址: https://www.jetbrains.com/webstorm/

網盤20161的下載地址:http://pan.baidu.com/s/1o8COGkE

如果新版的有問題,可以百度下載11.0.3

2.WebStorm破解:選擇Liscense server 然後輸入http://www.iteblog.com/idea/key.php 就可以了(這裏的破解不可能永遠有效,如果無效,需要百度找Liscense server破解)

其他破解參考:

點擊打開鏈接

點擊打開鏈接

3.RN提示設置:點擊打開鏈接 參考GitHub配置

如果是Mac 你要找~/Library/Preferences/WebStorm11/templates 注意~代表的用戶目錄,我的是/Users/panca,可能你的這個目錄下不能找到Library,因爲可能被隱藏了,直接打開終端輸入open ~/Library/Preferences回車就可以到Preferences目錄,查找WebStormXX目錄,如果WebStormXX找不到templates,需要新建一個templates,但是如果你的WebStormXX也沒有的話,你就先配置其他的吧,然後再去看,實在不行就只能重啓一下。

4.字體顏色和樣式設置:設置面板—>Editor —> Colors&Fonts

可以修改Font,JavaScript,CSS,HTML等的顏色和字體,如果你有配置Jar包也可以導入,File—>import Setting—>選擇你的Jar包,點擊OK,File—>Export Setting—>選擇你的Jar包位置,點擊OK導出

 

參考:點擊打開鏈接

5.編碼設置:設置面板—>Editor—>File Encoding設置編碼

 

四、Android Studio下載與安裝

官網點擊打開鏈接

1.下載

官網下載(最新);點擊打開鏈接

百度網盤下載(2.1.1):點擊打開鏈接密碼sx9h

注意:網盤下載時1.15G是含SDK Tools,270M的不含SDK Tools。

2.安裝和HelloWorld教程

https://segmentfault.com/a/1190000002401964

 

五:創建項目和真機調試

 

(1).創建項目:react-native init AwesomeProject
(2).到項目文件夾(切換到package.json的位置):cd AwesomeProject
(3).運行Android:react-native run-android

 

如果直接運行Android,會自動的去開啓服務的,也可以手動的開啓服務react-native start,服務開啓之後在瀏覽器輸入地址:http://localhost:8081/index.android.bundle?platform=android 

真機調試:

(4).查看手機是否連上:adb devices

 

(5).A5.0以上真機輸入命令:adb reverse tcp:8081 tcp:8081
    5.0以下真機輸入命令:adb shell input keyevent 82

 

參考資料:點擊打開鏈接

 

mac系統如何顯示和隱藏文件

 

顯示Mac隱藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true
隱藏Mac隱藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool false

 

 

 

 

 

 

 

 

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