React Native開發(fā)環(huán)境配置

1.環(huán)境需求
2.React Native安裝
3.創(chuàng)建第一個應(yīng)用
4.React Native應(yīng)用目錄結(jié)構(gòu)
5.運行HelloWorld

以下的教程是針對Mac系統(tǒng)的環(huán)境配置

一、環(huán)境需求

1.1 安裝Homebrew

Homebrew是OS X的套件(包)管理器,用于安裝Node.js和一些其他必須的工具軟件。

安裝方式:
  ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安裝Homebrew

<b>使用brew -v 命令來檢查是否安裝成功</b>

驗證是否安裝成功
1.2 安裝npm 和 Node.js

Node.js最好安裝5.0及其以上更高版本,node安裝成功后npm自動也就有了,直接下載安裝Node.js,網(wǎng)址:https://nodejs.org/en/download/

  brew install node
安裝Node.js
1.3 安裝WatchMan

WatchMan是由Facebook提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時的性能(packager可以快速捕捉文件的變化從而實現(xiàn)實時刷新)。該工具不是必須安裝的,不安裝不影響開發(fā)環(huán)境。

brew install watchman
安裝WatchMan

二、React Native安裝

Yarn、React Native的命令行工具(react-native-cli)
npm install -g yarn react-native-cli

Yarn是Facebook提供的替代npm的工具,可以加速node模塊的下載。React Native的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項目、運行打包服務(wù)(packager)等任務(wù)。

安裝React Native

三、React Native的第一個應(yīng)用

3.1執(zhí)行命令,生成一個工程
 react-native init 項目名稱

網(wǎng)絡(luò)限制原因,需要等待一段時間(具體視網(wǎng)絡(luò)情況而定)。react-native命令行從npm官方源拖代碼時會遇上麻煩,可以將npm倉庫源替換為國內(nèi)鏡像:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

HelloWorld
3.2目錄結(jié)構(gòu)分析:
目錄結(jié)構(gòu)

默認生成android和ios兩個平臺的原生項目;

  • android文件夾,就是一個可以用android studio打開的android項目。
  • ios文件夾,是一個可以用xcode打開的ios項目。
  • index.android.js,這是android的React Native入口文件。
  • index.ios.js,這是ios的React Native入口文件。
  • package.json,類似android studio的build.gradle,你依賴的庫都寫在里面。
  • node_module文件夾,你依賴的庫下載下來都存放在里面,屬于git的忽略文件,你要找的依賴庫源碼也在里面,包括React和React Native。
  • jscode文件夾,是自己創(chuàng)建的文件夾,用來存放自己寫的js文件。

如果想更改Android的項目,打開index.android.js文件

index.android.js

四、運行工程文件

不管是 iOS 還是 Android,在開發(fā)調(diào)試階段,都需要在 Mac 上啟動一個 HTTP 服務(wù),稱為Debug Server,默認運行在 8081 端口,APP 通 Debug Server 加載 js。

<b>打開Android Studio運行項目</b>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容