1. 程式人生 > >Mac電腦配置IOS React Native開發環境配置筆記

Mac電腦配置IOS React Native開發環境配置筆記

React Native(以下簡稱RN)的開發環境配置直接參考官方文件即可完成,不過對小白來說東西有點多,有些名詞不是很好理解,這裡就官方的安裝文件稍微展開說一下。

中文版配置說明:不錯的中文說明。
官方英文版配置說明:英文不錯的小夥伴可以直接看英文官方的

環境需求:
1.Xcode 7.0以上版本

React Native目前需要Xcode 7.0 或更高版本。你可以通過App Store或是到Apple開發者官網上下載。

2.需要安裝Homebrew

這個東東又叫brew,是在OSX平臺上的軟體包管理工具,可以理解為類似Linux平臺下(如Ubuntu)的apt-get、(CentOS下的)yum等功能,在配置RN環境中,需要Homebrew用來安裝RN開發所需的軟體包(eg:node,watchman, flow)
Homebrew

官方網站(簡體中文版)
安裝,按照官網的命令列在命令終端輸入

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

出現下圖則安裝成功。

3.安裝node

3.1 使用Homebrew來安裝Node.js. React Native目前需要NodeJS 5.0或更高版本。本文釋出時Homebrew預設安裝的是最新版本,一般都滿足要求。

直接執行命令:

brew install node

執行截圖:

 安裝完node後建議設定npm映象以加速後面的過程(或使用科學上網工具)。

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

執行截圖:

 

 4.Yarn、React Native的命令列工具(react-native-cli)

Yarn是Facebook提供的替代npm的工具,可以加速node模組的下載。React Native的命令列工具用於執行建立、初始化、更新專案、執行打包服務(packager)等任務。

安裝命令:

npm install -g yarn react-native
-cli

執行截圖: 

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

sudo chown -R `whoami` /usr/local

這一步驟會同時安裝Xcode IDE和Xcode的命令列工具。
雖然一般來說命令列工具都是預設安裝了,但你最好還是啟動Xcode,並在Xcode | Preferences | Locations選單中檢查一下是否裝有某個版本的Command Line Tools。Xcode的命令列工具中也包含一些必須的工具,比如git等。

推薦安裝的工具

Watchman

 Watchman是由Facebook提供的監視檔案系統變更的工具。安裝此工具可以提高開發時的效能(packager可以快速捕捉檔案的變化從而實現實時重新整理)。

brew install watchman

Flow

Flow是一個靜態的JS型別檢查工具。譯註:你在很多示例中看到的奇奇怪怪的冒號問號,以及方法引數中像型別一樣的寫法,都是屬於這個flow工具的語法。語法並不屬於ES標準,只是Facebook自家的程式碼規範。所以新手可以直接跳過(即不需要安裝這一工具,也不建議去費力學習flow相關語法)。
brew install flow

Nuclide

Nuclide(此連結需要科學上網)是由Facebook提供的基於atom的整合開發環境,可用於編寫、執行和 除錯React Native應用。

測試安裝

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

你也可以在Nuclide中開啟AwesomeProject資料夾 然後執行,或是雙擊ios/AwesomeProject.xcodeproj檔案然後在Xcode中點選Run按鈕。

修改專案

現在你已經成功運行了專案,我們可以開始嘗試動手改一改了:

使用你喜歡的編輯器開啟index.ios.js並隨便改上幾行。

在iOS Emulator中按下⌘-R就可以重新整理APP並看到你的最新修改!

完成了!

恭喜!你已經成功執行並修改了你的第一個React Native應用。

相關推薦

Mac電腦配置IOS React Native開發環境配置筆記

React Native(以下簡稱RN)的開發環境配置直接參考官方文件即可完成,不過對小白來說東西有點多,有些名詞不是很好理解,這裡就官方的安裝文件稍微展開說一下。 中文版配置說明:不錯的中文說明。官方英文版配置說明:英文不錯的小夥伴可以直接看英文官方的 環境需求:1.Xcode 7.0以上版本 React

環境配置React Native 開發環境配置 For Android

React Native 是FaceBook開源的一個專案,FaceBook希望可以用寫 Web App 的方式去寫 Native App。它可以讓我們用JS和React來開發應用,使用React Native可以通吃Android 和 IOS ,以及We

React Native系列教程】Mac(OSX)平臺搭建React Native開發環境

尊重版權,未經授權不得轉載 本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72575799) 告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家

React Native開發環境配置

-------------如果你使用的是Mac OS系統,請參照以下步驟----------- 一、環境需求 1.1  安裝Homebrew        Homebrew是OS X的套件(包)管理器,我們可以通過它獲取並且安裝很多元件 安裝方式:       ruby

Windows下React-Native開發環境配置

     1、一開始是在npm安裝時出現“‘node’”不是內部命令。。。是nodejs沒有安裝成功,雖然安裝過程會自動寫入環境變數,但是還是要在path後加入nodejs的安裝路徑,我的是"C:/Develope/nodejs"     接著在命令視窗輸入 node 

在window下搭建react-native開發環境配置,並通過react-native-cli生成一個專案執行

安裝些基本軟體,自行找教程,記得配置下環境變數 安裝python2 安裝jdk node、yarn 模擬器Genymotion傳送門 安裝android studio 然後看著教程將SDK裝好傳

React Native 開發環境配置---ubuntu14 linux

小白用的是ubuntu 14.4 64位的,說一下開發之前的配置。 1 安裝node環境 這個可以隨便搜一下很多, 官網下載 配置環境變數 最後一定要驗證是否成功 終端輸入 node -v 看看是否出現

手把手教你搭建React Native 開發環境 - ios篇 (React [email&#

由於之前我是h5的,沒接觸過ios和安卓, 也不瞭解xcode配置,所以 建議學reace-native之前還是先去了解一下ios和安卓開發環境搭建等問題。 環境下載及配置 nodejs:https://nodejs.org/en/download/ 設定淘寶映象 $ npm con

React Native 開發環境安裝和配置

要進行Rect Native 開發你需要安裝如下工具, homebrew,nvm,watchman ,flow和node.js. Homebrew是一個方便開發者在MAC OS X系統上面安裝Linux工具包的ruby指令碼,而MAC OS X已經內建了ruby的

搭建 React Native 開發環境 —— Node.js 安裝和配置

1. 前言 在正式開發 React Native 應用之前,需要先搭建好 React Native 的開發環境。搭建 React Native 開發環境有以下幾個主要步驟。 原生開發工具:iOS 開發使用 Xcode,Android 開發使用 Android

Mac上搭建React Native開發環境

概述 前面我們介紹過在window環境下開發React Native專案,今天說說怎麼在mac上搭建一個RN的開發環境。 配置mac開發環境 基本環境安裝 1.先安裝Homebrew:用於安裝NodeJS和其他工具。 注:Homebrew詳

React Native開發環境配置

1.安裝Homebrew: 在MAC中開啟終端工具並輸入如下語句: ruby -e "$(curl --insecure -fsSL https://raw.githubusercontent.com/Homebrew/install/master/inst

Mac下搭建react native開發環境

安裝必需軟體 Homebrew Homebrew, Mac系統的包管理器,用於安裝NodeJS和一些其他必需的工具軟體。 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew

安裝配置React Native開發環境

步驟如下: 1、安裝HomeBrew,命令如下: JerryMacBook-Pro:~ Jerry.Yao$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install

iOS 2018最新搭建 React Native 開發環境教程

一、ReactNative簡介 ReactNative是移動端目前最熱的框架之一, 著力於提高多平臺開發的開發效率 —— 僅需學習一次,編寫任何平臺。(Learn once, write anywhere)。Facebook 已經在多項產品中使用了Reac

Windows搭建React Native開發環境

win 9.png 技術 src alt blog nat -1 bsp 成功部署 Windows搭建React Native開發環境

react-native 開發環境搭建

post 註意 令行 圖片 技術 usb bubuko http androi 首先安裝jdk。本教程基於jdk1.8,安裝時有一點要特別註意:jdk和jre必須裝到不同目錄下,否則初始化react-native項目時大概率報tools.jar not found ex

計算機圖形學-mac系統下Xcode中OpenGL開發環境配置

配置步驟 ctf 註意 posit 圖片 pen ret open 方式 mac系統下Xcode中OpenGL開發環境配置。 這學期有計算機圖形學的課程,需要用到OpenGL,最近著手開始配置開發環境了,老師上課給的安裝包都是基於windows系統的。網上也是window

react-native-開發環境搭建

Go roi ids ati ios studio androi 工具 sta 一、開發環境搭建-windows平臺; 安裝 node 安裝 react native npm install -g react-native-cli 安裝Android開發工具Androi

win10的react native 開發環境搭建,使用Android模擬器

1.開啟cmd的管理員模式,win+X,選擇命令提示符(管理員)即可,執行如下命令: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy