手教你在Mac中搭建iOS的 React Native環(huán)境

準備工作

1.你需要一臺Mac電腦。。(這不是廢話?我所用的是Air~~窮。。)

2.我所操作的電腦系統(tǒng)環(huán)境是

3.xcode版本:8.0正式版


必需的軟件

1.Homebrew

Homebrew, Mac系統(tǒng)的包管理器,用于安裝NodeJS和一些其他必需的工具軟件。

打開終端,執(zhí)行

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

如果在在Max OS X 10.11(El Capitan)版本中,homebrew在安裝軟件時可能會碰到/usr/local目錄不可寫的權(quán)限問題??梢允褂孟旅娴拿钚迯?fù):

sudo chown -R `whoami` /usr/local


安裝完成后:進過一系列等待后,

(其中安裝需要輸入電腦密碼)


2.Node

使用剛剛安裝的Homebrew來安裝Node.js

brew install node

安裝完成后


3.安裝完node后建議設(shè)置npm鏡像以加速后面的過程,否則后面插件安裝巨慢

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

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


?4.安裝Yarn

Yarn是Facebook提供的替代npm的工具,可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務(wù)(packager)等任務(wù)。

npm install -g yarn react-native-cli

安裝完成后


5.Watchman

Watchman是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時的性能(packager可以快速捕捉文件的變化從而實現(xiàn)實時刷新)。

brew install watchman


6.Flow

Flow是一個靜態(tài)的JS類型檢查工具。譯注:你在很多示例中看到的奇奇怪怪的冒號問號,以及方法參數(shù)中像類型一樣的寫法,都是屬于這個flow工具的語法。這一語法并不屬于ES標準,只是Facebook自家的代碼規(guī)范。所以新手可以直接跳過(即不需要安裝這一工具,也不建議去費力學習flow相關(guān)語法)。

brew install flow


以上操作完成后,環(huán)境基本打好,缺的是一個IDE,既然React Native是Facebook的玩意,那就用Facebook推薦的方案吧,這里采用Atom+Nuclide插件


1.安裝Atom

下載地址(這蛋疼的下載地址,每秒只有幾KB,建議翻x下載)

下載完成后解壓,打開


打開正常后,我們安裝Nuclid,有兩種方式,圖形化下載安裝和命令行,兩種都說一下

1.圖形化安裝:

點擊菜單欄:Atom->Preferences,或者可以”Command+,”快捷打開

然后,在Install Packets的輸入框中,輸入nuclide,出現(xiàn)的第一個就是我們想要安裝的,點擊install

安裝完成后就會有上圖紅色圈中的菜單欄


2.命令行安裝:

apm install nuclide

命令行安裝完成后,打開Atom,選擇Packages->Settings View->Manage Packets

?然后選擇Packages,Nuclide中點擊Settings


然后往下滾動找到如圖選項打鉤


然后重啟Atom,就會執(zhí)行相關(guān)安裝,到這里,所有安裝完畢!。


最后,我們創(chuàng)建一個工程試驗一下。。

用命令行cd到桌面,然后

react-native init 項目名稱

項目創(chuàng)建完畢后的文件夾內(nèi)容如圖。。。。


如果你直接用xcode打開.xcodeproj運行,結(jié)果將會是:


這是沒寫過一行代碼的項目,如果你要修改一下,可以打開Atom,點擊Add project folder,找到你剛才創(chuàng)建的工程打開,


?打開后文件目錄:


可以發(fā)現(xiàn)我這里打開的是ios.js,如果是安卓的伙伴當然是打開android.js

然后,你就可以隨意開發(fā)了。。。。


來源:https://www.cnblogs.com/damnbird/p/6074607.html

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 原文地址:http://www.cnblogs.com/damnbird/p/6074607.html 這篇博文真...
    小曼blog閱讀 2,246評論 5 3
  • 難得的好天氣,總是令人心曠神怡。冬日的暖陽更是平添了一份明亮與柔和,也許是陽光太過熱情,瓦藍的天空中沒有一絲微...
    婳扇娮酒閱讀 502評論 1 2
  • 如果,我們變成回憶,請你記得曾經(jīng),在你的世界里,我很認真的和你一起走過,走過那個黃昏快接近黑夜的小徑,后來不是因為...
    a1cfb6e78be4閱讀 464評論 0 3
  • 歡迎來到保定大V媽媽之家,這里是小不點第47條早安問候。天網(wǎng)恢恢,疏而不漏。這句話出自老子的《道德經(jīng)》?!疤炀W(wǎng)”中...
    小不點張娜閱讀 133評論 0 0
  • 怎樣在ps設(shè)置弧形的圖片陰影, 先畫一個矩形、圓角矩形、各種形、 圖層面板雙擊矩形,添加投影,黑色,角度90度。 ...
    花園地閱讀 4,292評論 0 2

友情鏈接更多精彩內(nèi)容