ReactNative開發環境

此內容根據徐贏老師的文檔整理後寫處

原版地址：https://tuomaxu.gitbooks.io/reactnative/content/

 

 

ReactNative是跨平開發的解決方案，在開發平臺的選擇上，mac平臺和win平臺均可以。

所須要工具以下：

1，Nodejs環境

2，create-react-native-app

3，Expo App

4，iPhone和安卓手機，或安卓手機模擬器（推薦使用夜神模擬器）

以上工具均有mac和win平臺的安裝包。

筆者使用的是mac平臺作開發，全部下面演示都以mac平臺進行。

 

 

安裝Nodejs環境

1，進入http://nodejs.cnnodejs中文網，下載與自身環境相一致的nodejs安裝包

2，安裝包下載以後，雙擊進行安裝

win平臺的同窗注意，安裝過程當中要關閉殺毒軟件和各類安全工具

3，安裝完成以後，打開命令行工具，檢查是否安裝成功，執行以下命令：

$ node -v

該命令執行結果爲當前node版本，筆者當前版本爲：

v6.9.1

4，檢查NPM是否安裝成功，

npm 是Node包管理工具，以後須要使用它來安裝其餘node程序包

在在命令行中輸入以下命令：

$ npm -v

該命令執行結果爲：

4.5.0

 

 

安裝Yarn

Yarn是Facebook出品的一個依賴包管理工具，起做用和npm同樣。但Yarn具備更多好用的特性：

• Yarn 會緩存它下載的每一個包，因此不須要重複下載。它還能並行化操做以最大化資源利用率，因此安裝速度之快史無前例

• Yarn 在每一個安裝包的代碼執行前使用校驗碼驗證包的完整性。

• Yarn 使用一個格式詳盡但簡潔的 lockfile 和一個精確的算法來安裝，可以保證在一個系統上的運行的安裝過程也會以一樣的方式運行在其餘系統上

• 網絡適應單個請求失敗不會致使安裝失敗，請求失敗時會重試。

安裝yarn

訪問Yarn官網，下載響應平臺的安裝包，進行安裝

使用Yarn

安裝好以後，其餘工具會自動使用Yarn進行加速。

 

安裝create-react-native-app命令行工具

create-react-native-app是一個綜合建立ReactNative工程，而且不須要配置的工具，它極大的簡化了入門開發的流程。具體的內容，你們能夠進入其github.com的主頁進行瀏覽。

安裝create-react-native-app須要使用npm進行，在任意目錄下，輸入以下命令，即可以在該目錄下建立一個ReactNative工程。

$ npm install -g create-react-native-app

安裝成功以後，會展現安裝路徑。如安裝不成功，請檢查網絡，從新安裝。

 

建立ReactNative工程

ReactNative工程的模板須要經過create-react-native-app工具進行建立。建立方法以下：

1，經過命令行進入存放ReactNative工程的文件夾。

2，在該文件夾下執行以下命令：

$ create-react-native-app myapp

myapp爲工程名，能夠更換爲其餘字符，但必須小寫

安裝過程須要1-5分鐘不等，如想提高安裝速度，能夠安裝yarn，詳情見yarn官網

下面爲筆者安裝成功截圖：

筆者使用了yarn進行提速，全部命令中顯示爲yarn

 

 

運行預覽工程

1，工程建立完成以後，即可以啓動工程，開始開發和調試。

啓動工程，首先要使用命令行工具進入工程更目錄，而後運行以下指令

$ npm start

工程 啓動以後，會生成一個二維碼和一個本地連接，經過此此二維碼或本地連接，即可預覽工程運行效果。

2，啓動工程以後，須要在手機端安裝Expo App，使用Expo App對所開發的ReactNative App進行預覽運行。

安裝ExpoApp的方法以下：

iOS平臺：在AppStore中搜索Expo client，如圖

Android平臺下，訪問此連接：http://expo.io/--/api/v2/versions/download-android-apk 下載安裝包並安裝，安裝過程當中須要給此App所有權限。

3，Expo App在手機端安裝完成以後，打開ExpoApp，經過其掃描二維碼的功能，掃描生成的二維碼，即可以在App內預覽開發中的App工程

4，新建工程的運行效果爲：