此內(nèi)容根據(jù)徐贏老師的文檔整理后寫(xiě)處

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

?

?

ReactNative是跨平開(kāi)發(fā)的解決方案，在開(kāi)發(fā)平臺(tái)的選擇上，mac平臺(tái)和win平臺(tái)都可以。

所需要工具如下：

1，Nodejs環(huán)境

2，create-react-native-app

3，Expo App

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

以上工具均有mac和win平臺(tái)的安裝包。

筆者使用的是mac平臺(tái)做開(kāi)發(fā)，所有下面演示都以mac平臺(tái)進(jìn)行。

?

?

安裝Nodejs環(huán)境

1，進(jìn)入http://nodejs.cnnodejs中文網(wǎng)，下載與自身環(huán)境相一致的nodejs安裝包

2，安裝包下載之后，雙擊進(jìn)行安裝

win平臺(tái)的同學(xué)注意，安裝過(guò)程中要關(guān)閉殺毒軟件和各種安全工具

3，安裝完成之后，打開(kāi)命令行工具，檢查是否安裝成功，執(zhí)行如下命令：

$ node -v

該命令執(zhí)行結(jié)果為當(dāng)前node版本，筆者當(dāng)前版本為：

v6.9.1

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

npm 是Node包管理工具，之后需要使用它來(lái)安裝其他node程序包

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

$ npm -v

該命令執(zhí)行結(jié)果為：

4.5.0

?

?

安裝Yarn

Yarn是Facebook出品的一個(gè)依賴包管理工具，起作用和npm一樣。但Yarn具有更多好用的特性：

• Yarn 會(huì)緩存它下載的每個(gè)包，所以不需要重復(fù)下載。它還能并行化操作以最大化資源利用率，所以安裝速度之快前所未有

• Yarn 在每個(gè)安裝包的代碼執(zhí)行前使用校驗(yàn)碼驗(yàn)證包的完整性。

• Yarn 使用一個(gè)格式詳盡但簡(jiǎn)潔的 lockfile 和一個(gè)精確的算法來(lái)安裝，能夠保證在一個(gè)系統(tǒng)上的運(yùn)行的安裝過(guò)程也會(huì)以同樣的方式運(yùn)行在其他系統(tǒng)上

• 網(wǎng)絡(luò)適應(yīng)單個(gè)請(qǐng)求失敗不會(huì)導(dǎo)致安裝失敗，請(qǐng)求失敗時(shí)會(huì)重試。

安裝yarn

訪問(wèn)Yarn官網(wǎng)，下載響應(yīng)平臺(tái)的安裝包，進(jìn)行安裝

使用Yarn

安裝好之后，其他工具會(huì)自動(dòng)使用Yarn進(jìn)行加速。

?

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

create-react-native-app是一個(gè)綜合創(chuàng)建ReactNative工程，并且不需要配置的工具，它極大的簡(jiǎn)化了入門開(kāi)發(fā)的流程。具體的內(nèi)容，大家可以進(jìn)入其github.com的主頁(yè)進(jìn)行瀏覽。

安裝create-react-native-app需要使用npm進(jìn)行，在任意目錄下，輸入如下命令，便可以在該目錄下創(chuàng)建一個(gè)ReactNative工程。

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

安裝成功之后，會(huì)展示安裝路徑。如安裝不成功，請(qǐng)檢查網(wǎng)絡(luò)，重新安裝。

?

創(chuàng)建ReactNative工程

ReactNative工程的模板需要通過(guò)create-react-native-app工具進(jìn)行創(chuàng)建。創(chuàng)建方法如下：

1，通過(guò)命令行進(jìn)入存放ReactNative工程的文件夾。

2，在該文件夾下執(zhí)行如下命令：

$ create-react-native-app myapp

myapp為工程名，可以更換為其他字符，但必須小寫(xiě)

安裝過(guò)程需要1-5分鐘不等，如想提升安裝速度，可以安裝yarn，詳情見(jiàn)yarn官網(wǎng)

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

筆者使用了yarn進(jìn)行提速，所有命令中顯示為yarn

?

?

運(yùn)行預(yù)覽工程

1，工程創(chuàng)建完成之后，便可以啟動(dòng)工程，開(kāi)始開(kāi)發(fā)和調(diào)試。

啟動(dòng)工程，首先要使用命令行工具進(jìn)入工程更目錄，然后運(yùn)行如下指令

$ npm start

工程 啟動(dòng)之后，會(huì)生成一個(gè)二維碼和一個(gè)本地鏈接，通過(guò)此此二維碼或本地鏈接，便可預(yù)覽工程運(yùn)行效果。

2，啟動(dòng)工程之后，需要在手機(jī)端安裝Expo App，使用Expo App對(duì)所開(kāi)發(fā)的ReactNative App進(jìn)行預(yù)覽運(yùn)行。

安裝ExpoApp的方法如下：

iOS平臺(tái)：在AppStore中搜索Expo client，如圖

Android平臺(tái)下，訪問(wèn)此鏈接：http://expo.io/--/api/v2/versions/download-android-apk?下載安裝包并安裝，安裝過(guò)程中需要給此App全部權(quán)限。

3，Expo App在手機(jī)端安裝完成之后，打開(kāi)ExpoApp，通過(guò)其掃描二維碼的功能，掃描生成的二維碼，便可以在App內(nèi)預(yù)覽開(kāi)發(fā)中的App工程

4，新建工程的運(yùn)行效果為：

轉(zhuǎn)載于:https://www.cnblogs.com/sunny-pei666/p/7235989.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的ReactNative开发环境的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。