2) React Native 環境搭建和創建項目(Mac)

(一) 搭建基本環境(必要)

使用React Native開發iOS應用需要OSX系統,Xcode,Homebrew,node,npm,也可以有選擇的使用watchman 、Flow。

1. 安裝Homebrew

Homebrew, 簡稱brew, Mac系統的包管理器, 用于安裝NodeJS和一些其他必需的工具軟件。
Home-brew 的使用方式:
1)搜索軟件:brew search 軟件名,如brew search wget
2)安裝軟件:brew install 軟件名,如brew install wget
3)卸載軟件:brew remove 軟件名,如brew remove wget

打開終端,運行以下語句(中間需要輸入密碼)進行安裝:

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

運行效果如下:



Homebrew安裝.png

可通過如下語句查看安裝是否成功以及安裝的Homebrew版本:

brew -v

正常情況下均可安裝成功,若出現網絡問題安裝失敗,則運行如下語句清理后再重新安裝:

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

2. 使用Homebrew來安裝Node.js

React Native需要NodeJS 4.0或更高版本。本文發布時Homebrew默認安裝的是6.x版本,完全滿足要求。

終端運行語句如下:

brew install node

運行效果如下:

安裝Node.js.png

3. 安裝React Native的命令行工具(react-native-cli)

React Native的命令行工具用于執行創建、初始化、更新項目、運行打包服務(packager)等任務。

終端運行語句如下:

npm install -g react-native-cli

運行效果如下:


安裝react-native-cli.png

若出現錯誤(可能由于權限不足),則實用以下語句進行安裝:

sudo npm install -g react-native-cli

補充:(由于國內網絡問題,可以將npm倉庫替換為國內鏡像)

//將npm倉庫替換為國內鏡像:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

4. Xcode

iOS 開發這個最基礎的,應該一般有安裝,,沒有的話只推薦在App Store直接搜索安裝。

(二) 推薦安裝的工具

1. Watchman

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

終端運行語句安裝:

brew install watchman

運行效果如下:


安裝 Watchman.png

2. Flow

Flow是一個靜態的JS類型檢查工具,可方便找出代碼中可能存在的類型錯誤。
譯注:你在很多示例中看到的奇奇怪怪的冒號問號,以及方法參數中像類型一樣的寫法,都是屬于這個flow工具的語法。這一語法并不屬于ES標準,只是Facebook自家的代碼規范。

終端運行語句安裝:

brew install flow

運行效果如下:

安裝Flow.png

3. React Native開發之IDE

可以直接用自己喜歡的編輯器進行編輯。
React Native官方推薦了三種IDE編寫React Native應用:

1)Atom和Nuclide
2)WebStorm
3)Sublime Text
4)** VSCode+React Native Tools**

更近一步的了解和使用參考我一起寫的另一篇文章哈哈:
React Native 開發之IDE

(三) 創建第一個項目

1. 初始化創建項目

命令行創建項目:

react-native init AwesomeProject

運行截圖如下:


react-native init AwesomeProject.png

這里可能會是個漫長的等待過程,可能由于項目依賴包本身就很龐大,讓后下載速度比較慢。總之我半夜做的嘗試,為了寫文章截圖哈哈,安心去看了一集異世界的動漫,然后回來就發現創建項目成功了哈。。(ps:之前在另一部電腦就試過創建項目活著集成原生的時候執行這個命令,不過等得不耐煩就又ca掉它了,,可能真的需要耐心哈哈)
創建成功則如下:


創建成功截圖.png
生成項目文件集.png

2. 運行項目

命令行運行項目

//  視情況而定,總之進入項目根目錄
cd AwesomeProject

//  運行iOS項目
react-native run-ios

接下來就是一連串反應,截圖如下,成功運行項目:


彈出運行服務窗口.png
虛擬機運行成功截圖.png

補充:
若是調試安卓版本:(需要安裝好安卓SDK、配置環境等)

//  運行安卓項目
react-native run-android

3. 除了命令行運行,也可直接像iOS原生那樣運行

方法一:Nuclide中打開AwesomeProject文件夾,然后運行
方法二:雙擊ios/AwesomeProject.xcodeproj文件然后在Xcode中點擊Run按鈕。(最常用,對iOS開發者)

4. 簡單的修改調試

使用你喜歡的編輯器打開index.ios.js并隨便改上幾行。
在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改!


大功告成,文章的編寫和實踐參考了很多文章,最主要參考的是官方中文文檔。

開始在寫React Native的學習教程,是一邊研究一邊編寫的,已有的成果如下:
1) React Native 簡介與入門

  1. React Native 環境搭建和創建項目(Mac)
    3) React Native 開發之IDE
    4) React Native 入門項目與解析
    5) React Native 相關JS和React基礎
    6) React Native 組件生命周期(ES6)
    7) React Native 集成到原生項目(iOS)
    8) React Native 與原生之間的通信(iOS)
    9) React Native 封裝原生UI組件(iOS)
    ...繼續努力中
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,517評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,087評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,521評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,493評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,207評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,603評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,624評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,813評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,364評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,110評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,305評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,874評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,532評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,953評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,209評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,033評論 3 396
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,268評論 2 375

推薦閱讀更多精彩內容