好久沒有寫東西,最近想學一下React Native,藉此寫一寫筆記
React Native 的安裝
使用React Native開發iOS應用需要OSX系統,Xcode,Homebrew,node,npm以及watchman和react-native-cli。
1.Mac安裝Xcode 略過
2.Mac安裝Homebrew。
Homebrew是以最簡單,最靈活的方式來安裝蘋果公司在MacOS中不包含的UNIX工具。
2.1打開終端輸入 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.2 會有 點擊return鍵和輸入密碼 如圖
3. Mac安裝node和npm
已經安裝好了Homebrew,可直接安裝node和 npm。打開終端:
輸入命令行 brew install node 如圖:
4.Mac安裝watchman 命令行輸入 brew install watchman
5.Mac安裝flow 命令行輸入 brew install flow
6.Mac 安裝react-native-cli(用來開發React Native的命令行工具)
命令行輸入 npm install -g react-native-cli
Mac電腦JDK和android-SDK 的安裝
1.JDK安裝
1.1在https://www.oracle.com/index.html網址可直接下載
1.2如圖
等待下載完安裝即可。
1.3 首次安裝,需要做一些配置。
1.3.1 找到home文件路徑
1.3.2 打開終端,創建文件 touch .bash_profile
編輯 vim .bash_profile
將 以下 代碼粘進去,如圖
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_40.jdk/Contents/Home
PATH=$JAVA_HOME/bin:$PATH:.
CLASSPATH=$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export JAVA_HOME
export PATH
export CLASSPATH
1.3.3,驗證是否成功 直接輸入 java
2.通過androidstudio 安裝 android-SDK
2.1.安裝完androidstudio後,單擊androidstudio,右上角選擇Preferences.
2.2.androidstudio安裝的最新的SDK,開發兼容舊的安卓系統,還是需要安裝不同版本的 sdk
2.3.等待安裝完
2.4.安裝android模擬器
打開Androidstudio,創建一個新工程,開始安裝模擬器
等模擬器完成,進行測試是否安裝成功。
如此便安裝成功。
創建項目初始化
1.命令行創建一個NativeTest的項目( react-native init NativeTest )
先運行iOS,直接用Xcode打開,
運行之後,就會發現報錯,找不到#import <React/RCTBundleURLProvider.h> 文件,這是因爲 init 命令默認會創建最新的版本,而目前最新的 0.45 及以上版本需要下載 boost 等幾個第三方庫編譯。這些庫在國內即便翻牆也很難下載成功,導致無法運行iOS項目。可以使用--version
參數(注意是2個槓)創建指定版本的項目。例如react-native init MyReactiveApp --version 0.55.3
。注意版本號必須精確到兩個小數點。
再試一次,react-native init MyReactiveApp --version 0.55.3,打開iOS項目運行
這次就成功了
再試試android運行一下,如圖
完成
注:在運行ios時遇到這個問題
原因:找了很久,才發現是在運行時打開了翻牆軟件,只要關閉就可以,吐血三升啊