React Native的安裝和初始化(android /ios)

好久沒有寫東西,最近想學一下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時遇到這個問題

原因:找了很久,才發現是在運行時打開了翻牆軟件,只要關閉就可以,吐血三升啊

 

 

 

 

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