React Native 環(huán)境搭建（mac）

一、安裝HomeBrew

Homebrew 是 OS X 或者 macOS 的套件管理器，我們可以通過它來獲取并安裝很多組件

二、安裝 Node.js

  • 安裝方法一：
  • 下載Node.js 當(dāng)前版本為v6.9.3，如需最新版本，可在官網(wǎng)下載;
  • 下載之后雙擊安裝即可，npm也會隨之安裝，npm用于nodejs包管理的工具。
  • 安裝方法二：
  • 使用homebrew安裝Node.js，默認(rèn)安裝的是最新版本，
    brew install node
  • 安裝完成后
  • 建議設(shè)置npm鏡像，以加速后面的過程
    npm config set registry https://registry.npm.taobao.org --global
    npm config set disturl https://npm.taobao.org/dist --global

三、安裝watchman和flow

  • 1、watchman是用于監(jiān)聽文件變化的工具

  • 2、flow是靜態(tài)分析js語法錯誤的工具
    安裝命令如下：
    brew install watchman
    brew install flow

  • 你在很多示例中看到的奇奇怪怪的冒號問號，以及方法參數(shù)中像類型一樣的寫法，都是屬于這個flow工具的語法。這一語法并不屬于ES標(biāo)準(zhǔn)，只是Facebook自家的代碼規(guī)范。所以新手可以直接跳過（即不需要安裝這一工具，也不建議去費力學(xué)習(xí)flow相關(guān)語法。

  • 如果watchman安裝時出現(xiàn)錯誤

四、安裝iOS和安卓運行環(huán)境

  • 1、iOS：安裝Xcode，最好是Xcode8.1以后。
  • Apple開發(fā)者官網(wǎng)下載Xcode
  • 或在App Store下載Xcode：鏈接
  • 2、安裝Android運行環(huán)境
  • 安裝和配置 SDK
    • 安裝最新的 JDK
    • 安裝 Android SDK：
      brew install android-sdk
    • 設(shè)置 ANDROID_HOME 環(huán)境變量
      1、如果.bash_profile不存在，進(jìn)入用戶當(dāng)前的home目錄進(jìn)行創(chuàng)建
      cd ~
      touch .bash_profile
      2、使用vim .bash_profile或open .bash_profile,在打開的界面進(jìn)行編輯
      3、如果你是通過HomeBrew安裝的SDK，則加入下面的路徑：
      exportANDROID_HOME=/usr/local/opt/android-sdk#
      否則加入：
      exportANDROID_HOME=~/Library/Android/sdk
      4、建議把Android Tools Directory 也加到里面:
      PATH="/Library/Android/sdk/tools:/Library/Android/sdk/platform-tools:${PATH}" export PATH
      添加路徑截圖

      5、更新剛配置的環(huán)境變量 source .bash_profile
  • 安裝 Android Studio
  • 安裝模擬器 Genymotion和虛擬機(jī)VirtualBox
    • Genymotion 是一個第三方模擬器，它比 Google 官方的模擬器更易設(shè)置且性能更好。但是，它只針對個人用戶免費
      • 如果你尚未安裝 VirtualBox，先安裝VirtualBox，否則無法打開Genymotion；
      • 下載并安裝 Genymotion 打開 Genymotion
      • 創(chuàng)建一個模擬器并啟動
      • 按下 ?+M

五、安裝開發(fā)工具

六、安裝 React Native

  • 安裝方法一：從github下載: https://github.com/facebook/react-native
  • 安裝方法二：直接用命令安裝：
    npm install -g yarn react-native-cli
  • 如果你看到 EACCES: permission denied這樣的權(quán)限報錯，修復(fù) /usr/local 目錄的所有權(quán)
    sudo chown -R whoami /usr/local
  • 或者用如下命令：
    sudo npm install -g yarn react-native-cli

七、運行項目

  • 1、創(chuàng)建項目：
    react-native init helloworld
    • helloworld為項目名
  • 2、運行項目：
    • 啟動本地庫：
      react-native start
    • 啟動模擬器：
      react-native run-ios
      react-native run-android

參考文章：
1、react-native 環(huán)境搭建配置（mac版 ）
2、Mac OS 搭建 React Native 環(huán)境

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容