搭建React Native開發環境

來源:互聯網
上載者:User

標籤:

原文地址:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/setup-react-native-development-environment/

安裝Xcode

從App Store搜尋下載。需要Apple Id帳號。

安裝Homebrew

開啟Terminal,執行以下命令即可安裝。詳情請參考Homebrew官網(http://brew.sh/)。

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

安裝完成之後,使用"brew doctor"命令檢查是否安裝成功。根據提示解決對應的問題、消除警告。

安裝Android SDK

通過Homebrew可以便捷地把Android SDK安裝到預設目錄"/usr/local/opt/android-sdk"。請在Terminal中執行以下命令。

install Android SDK
# no need VPNbrew install android-sdk

需要設定環境變數$ANDROID_HOME、$PATH。

install Android SDK
# 在Terminal中執行以下命令,開啟環境變數設定檔sudo nano ~/.bash_profile # 粘貼如下指令,儲存環境變數(需要登出並重新登入mac)export ANDROID_HOME=/usr/local/opt/android-sdkexport PATH=$PATH:$ANDROID_HOME/bin:$ANDROID_HOME/tools # 按CTRL+X可儲存

  

更新Android SDK組件(需要掛VPN)

在Terminal中執行"android sdk"即可開啟Android SDK更新管理工具。

如安裝Android SDK中的組件,注意"Android SDK Build-tools"的版本要求是23.0.1,使用Genymotion的情況下,可以不安裝"Intel x86 Atom_64 System Image"和"Intel x86 Atom System Image"。

安裝flow和watchman

請在Terminal中執行以下兩條命令。

install flow
# no need VPNbrew install flowbrew install watchman

  

安裝nodejs

從nodejs官網(https://nodejs.org/en/)下載安裝最新版的nodejs(目前的版本是:v4.3.1)。

安裝react-native-cli

通過nodejs可以便捷地安裝"react-native-cli"。請在Terminal中執行以下命令(注意使用"sudo"和"-g"選項)。

install react-native-cli
# no need VPNsudo npm install -g react-native-cli

  

安裝Genymotion

首先安裝VirtualBox,從百度搜尋即可。

與Android SDK內建的模擬器相比,Genymotion更為流暢,推薦安裝使用。需要去官方網站(https://www.genymotion.com/)註冊個人使用者帳號。

VirtualBox5.0.14與Genymotion2.6.0安裝包在移動硬碟上有。

安裝Webstorm 10

Webstorm可以很好的支援JSX文法,並能格式化代碼檔案,適合開發React Native項目。從Webstorm官網(https://confluence.jetbrains.com/display/WI/Previous+WebStorm+Releases)可以下載10.0.4版本。在協作平台中,可以找到註冊碼。

建立React Native空項目

建議為React Native項目建立一個根目錄,比如:~/RCTDev,然後在Terminal中執行如下命令(可能需要幾分鐘時間):

create first project
# no need VPNcd ~/RCTDevreact-native init NCFirstProject

  

即可建立一個名為"NCFirstProject"的新項目。

使用Webstorm編輯JSX代碼檔案

使用Webstorm開啟目錄"~/RCTDev/NCFirstProject",雙擊開啟index.ios.js檔案。等待Webstorm識別JSX代碼文法,然後點擊Switch切換。

在Webstrom命令列中,輸入"npm install"命令初始化"React Native"依賴項。

install dependencies of react-native
# no need VPNnpm install

  

在iOS模擬器中運行

在Webstrom命令列中,輸入"react-native run-ios"即可開啟iOS simulator並運行改項目。

快速鍵:

  • Command+R 修改任何js代碼之後,可以通過改快速鍵重載app看效果。
  • Ctrl+Command+Z 開啟菜單,可以啟用自動重載、查看幀率、審查元素等。
在Android模擬器中運行

首先需要在Genymotion中登入帳號並且安裝一個Android鏡像。運行Android鏡像後,可以在Webstorm命令視窗中執行"react-native run-android"。

快速鍵:

  • Command+M 開啟菜單,可以選擇重載app、啟用自動重載、查看幀率、審查元素等。

搭建React Native開發環境

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.