1. 程式人生 > >[React Native混合開發]React Native for iOS之環境搭建

[React Native混合開發]React Native for iOS之環境搭建

一 摘要

最近發現好多同事朋友,都在研究React Native,React Native會越來越多的公司開始研究、使用。也許是今後一個趨勢。這個技術主要利用js與原生(iOS Android)進行混編,解決HTML5 開發的APP短板問題.下面我們來看看利用React Native技術開發出來的APP(OS Android). 
這裡寫圖片描述

好廢話就講到這裡,下面給大家介紹一下,如何在MAC上搭建一個環境.

1. 安裝Homebrew

Homebrew主要用於安裝後面需要安裝的watchman、flow 
開啟MAC的終端,輸入如下命令:

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

2. 安裝nvm和nodejs

nvm是用於nodejs版本管理的工具,用於安裝nodejs。 
對於nvm應該可以使用brew直接安裝,但是我沒有用這個安裝,讀者可以自己使用如下命令試試:

brew install nvm 
  • 1

這樣就能夠在任意的終端中使用nvm命令了。 
然後執行如下的命令:

nvm install node && nvm alias default node 
  • 1

這個用於安裝nodejs和npm。npm用於nodejs包依賴管理的工具。

3. 安裝watchman

watchman是用於監聽檔案變化的工具,應該是用於監聽檔案變化,然後介面做出響應。執行如下命令:

brew install watchman 
  • 1

4. 安裝flow

flow我個人理解的是用於靜態分析js語法錯誤的工具,能夠更早的js的語法錯誤。執行如下的命令:

brew install flow 
  • 1

到這裡基本的環境就配置好了,下面建立一個iOS的例子,在終端中將目錄切換到你儲存工程的目錄,然後執行如下的命令: 
這裡寫圖片描述

$ npm install -g react-native-cli

這裡寫圖片描述

$ react-native init AwesomeProject

這裡寫圖片描述

$ cd AwesomeProject/

這裡寫圖片描述

第二個命令第一次執行會執行很長時間,因為需要安裝許多東西。然後再終端輸入如下命令開啟工程:

open ios/AwesomeProject.xcodeproj
  • 1

這樣就打開了iOS的工程,執行一下就能看到模擬器中的介面。 
這裡寫圖片描述

下面試著修改index.ios.js中的文字.

如果是編譯安卓平臺,只需要修改android.index.js就可以啦 
這裡寫圖片描述

然後在模擬器上按Cmd+R,這樣能夠看到修改馬上就呈現到模擬器上了。 
這裡寫圖片描述

結束

這樣環境就搭建完了,如果之前大家搭建過nodejs環境的,只需要npm install -g react-native-cli 以下幾步就可以啦.就說到這裡之後會給大家繼續介紹.