1. 程式人生 > >【React Native系列教程】Mac(OSX)平臺搭建React Native開發環境

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

尊重版權,未經授權不得轉載
本文出自:賈鵬輝的技術部落格(http://blog.csdn.net/fengyuzhengfan/article/details/72575799)

告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家現可以看視訊學React Native了。

在Mac平臺上開發React Native需要安裝以下環境和工具:

  1. Note.js
  2. React Native Command Line Tools
  3. XCode/AndroidStudio

安裝Node.js

React Native開發需要用到Node.js環境。我們做React Native開發會經常性的和Node.js進行打交道,比如:我們用npm start

命令啟動React Native的啟動器;用npm install安裝專案所依賴的第三方元件;用npm publish往npm上釋出一些元件等。

介紹

Note.js是基於Chrome’s V8 JavaScript引擎的JavaScript執行時。Node.js是一個事件驅動I/O服務端JavaScript環境。

好了廢話不多說了,下面就讓我們開始安裝node.js吧。

安裝說明

在Mac上安裝 Node.js可以通過Homebrew,在下文中會有Homebrew的安裝介紹

開啟終端執行如下命名:

brew install node

另外,也可在Note.js

官網下載安裝包進行安裝。

安裝React Native命令列工具

Note.js安裝成功之後,接下來我們就可以通過npm install來安裝React Native命令列工具了。

開啟終端,輸入並執行下面命令即可完成安裝:

npm install -g react-native-cli

![npm install -g react-native-cli-ios](http://www.devio.org/img/post/20160520/npm install -g react-native-cli-ios.png)

React Native命令列工具安裝成功之後,我們可以通過react-native --help

來查了它索支援的所有命令。

react-native--help

安裝iOS開發工具XCode

我們可以在AppStore上搜索XCode並進行下載安裝,安裝步驟和安裝普通的Mac應用是一樣的,在這裡就不重複了。

install-xcode

建立第一個React Native應用

初始化一個React Native應用,我們可以通過React Native命令列工具來完成,開啟終端輸入並執行下面命令:

react-native init <專案名字>
如:
react-native init FirstApp

如圖:
react-native-init

執行此命令之後,React Native會從npm上下載一些專案所依賴的包,並完成專案的初始化,初始化完成之後你會看到下圖的輸出:

react-native-init-success

然後我們開啟FirstApp專案的根目錄會看到如下專案結構:
react-native專案結構

其中,android目錄下是我們的Android Native專案,ios目錄下是我們的iOS Native專案。

修改npm映象,提高專案初始化的速度

我們在初始化React Native應用或從npm上安裝一些元件的時候通常的情況下是比較慢的,這是因為npm的服務是設在國外的,所以在國內訪問的速度不是很理想。提高專案初始化的速度我們可以為npm設定一個國內映象,讓npm每次下載元件的時候都從國內的映象上獲取這樣一來速度就會大大提高。

iOS修改npm映象的方法:

在iOS電腦上我們可以在.npmrc檔案中設定npm的下載映象地址,.npmrc檔案通常在/Users/使用者名稱/.npmrc路徑下,開啟此檔案然後新增:

registry = https://registry.npm.taobao.org

如果沒有修改許可權,那麼可以將此檔案複製一份到別的地方,修改完成之後再替換過去即可。

這樣一來訪問npm的時候就會被重定向到我們所設定的https://registry.npm.taobao.org映象伺服器,所以說速度就會大大提高。

執行React Native應用

React Native應用建立完成之後呢,我們便可以執行它了,執行一個React Native應用通常有兩種方式:

第一種方式:通過React Native命令列工具

開啟終端進入React Native專案的根目錄然後輸入並執行下面命令即可:

react-native run-ios
//如果要執行Android專案則通過下面命令
react-native run-android

因為我們剛初始化好的React Native應用會包括Android應用和iOS應用,所以我們可以通過上述命令來選擇將他們執行在不同的平臺上。

第二種方式:通過XCode執行我們的專案

除了命令列工具之外我們還可以藉助XCode來執行React Native專案的iOS平臺的應用,方法如下:
雙擊/Users/使用者名稱/Desktop/FirstApp/ios/FirstApp.xcodeproj,如圖:
open-react-native-ios-native-project

XCode開啟專案之後呢,我們可以單擊XCode左上方的組建和執行按鈕來執行我們的React Native iOS專案了:

run-rn-ios-by-xcode

在預設情況下,通過上述兩種方式來執行React Native應用的時候都會自動開啟一個React Native的啟動器也就是一個終端的視窗,如果沒有開啟我們可以通過npm start命令來手動啟動它。

React Native應用啟動完成之後我們會在模擬器或裝置上看到這樣的介面:

FirstApp-ios.png

這是我們剛初始化React Native應用的第一個預設的介面,到這裡我們已經在iOS平臺上成功的配置了React Native開發環境,並且建立和運行了第一個React Native應用。

其他

Homebrew

介紹

brew 全稱Homebrew 是Mac OSX上的軟體包管理工具。Homebrew安裝和解除安裝工具只用一行命令就能完成。

安裝說明

開啟終端視窗, 貼上以上指令碼。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
指令碼會解釋它的作用,然後在您的確認下執行安裝。

使用說明

使用brew安裝軟體

在終端執行如下命令
brew install <軟體名稱>

  • Homebrew 會將套件安裝到獨立目錄,並將檔案軟連結至 /usr/local 。
  • Homebrew 的所有檔案均會被安裝到預定義目錄下,所以您無需擔心 Homebrew 的安裝位置。
使用brew查詢軟體

brew search <軟體名稱>
執行此命令,brew會匹配有關該名稱的所有軟體並標識已經安裝的軟體。

檢視用brew安裝的所有軟體

brew list

更新brew

brew update

使用brew更新軟體

brew upgrade <使用brew已安裝的軟體名稱>

使用brew解除安裝軟體

brew uninstall <使用brew已安裝的軟體名稱>

如果大家對搭建React Native開發環境還有不明白的地方可以在文章下方給我留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博@CrazyCodeBoy,或者關注我的Github來獲取更多有關React Native開發的技術乾貨

告訴大家一個好訊息,為大家精心準備的React Native視訊教程釋出了,大家現可以看視訊學React Native了。

如果,大家在開發原生模組中遇到問題可以在本文的下方進行留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博,或者關注我的Github來獲取更多有關React Native開發的技術乾貨

推薦學習:視訊教程《React Native開發跨平臺GitHub App》