1,進入http://nodejs.cnnodejs中文網,下載與自身環境相一致的nodejs安裝包
2,安裝包下載之後,雙擊進行安裝
win平台的同學注意,安裝過程中要關閉殺毒軟體和各種安全工具
3,安裝完成之後,開啟命令列工具,檢查是否安裝成功,執行如下命令:
$ node -v
該命令執行結果為當前node版本,筆者目前的版本為:
4,檢查NPM是否安裝成功,
npm 是Node包管理工具,之後需要使用它來安裝其他node程式包
在在命令列中輸入如下命令:
$ npm -v
該命令執行結果為:
3.10.10
Yarn
Yarn是Facebook出品的一個依賴包管理工具,起作用和npm一樣。但Yarn具有更多好用的特性:
Yarn 會緩衝它下載的每個包,所以不需要重複下載。它還能並行化操作以最大化資源使用率,所以安裝速度之快前所未有
Yarn 在每個安裝包的代碼執行前使用校正碼驗證封裝的完整性。
Yarn 使用一個格式詳盡但簡潔的 lockfile 和一個精確的演算法來安裝,能夠保證在一個系統上的啟動並執行安裝過程也會以同樣的方式運行在其他系統上
網路適應單個請求失敗不會導致安裝失敗,請求失敗時會重試
安裝yarn
訪問Yarn官網,下載響應平台的安裝包,進行安裝
使用Yarn
安裝好之後,其他工具會自動使用Yarn進行加速。
當然安裝之前,你可以先檢查一下,你自己是否已經安裝過Yarn,如果出現的模式,說明已經安裝過了。
yarn -v 看一下目前的版本
安裝create-react-native-app命令列工具
create-react-native-app是一個綜合建立ReactNative工程,並且不需要配置的工具,它極大的簡化了入門開發的流程。具體的內容,大家可以進入其github.com的首頁進行瀏覽。
安裝create-react-native-app需要使用npm進行,在任意目錄下,輸入如下命令,便可以在該目錄下建立一個ReactNative工程。
注意,如果沒有安裝crna命令列工具的話,直接運行該命令會報這樣的錯:
所以我們要先安裝命令列工具,也叫腳手架。
由於npm 伺服器在境外,加上網速慢的原因,這個載入起來會很滿,大家稍安勿燥。
,安裝完成,我今天網速好像有點快啊,安裝了30s。
建立ReactNative工程
ReactNative工程的模板需要通過create-react-native-app工具進行建立。建立方法如下:
1,通過命令列進入存放ReactNative工程的檔案夾。
2,在該檔案夾下執行如下命令:
$ create-react-native-app myapp
myapp為工程名,可以更換為其他字元,但必須小寫
安裝過程需要1-5分鐘不等,如想提升安裝速度,可以安裝yarn,詳情見yarn官網
下面為筆者安裝成功:
這個過程比較 漫長 是真的漫長啊,我等了有10分種。這個過程你不要懷疑時間,真的是這樣的。
如果在這個過程中,你等的不耐煩,可以先下載我們的必備工具:1.模擬器,這裡我推薦夜神模擬器。2.Expo ,這是一個可以直接裝在手機上或者模擬器裡,用來測試專案用的。
模擬器都會安裝吧,安裝好模擬器,我們配置一下參數:
為了減少我們的記憶體開銷,我們把配置調的低一點。記憶體大的土豪無所謂!
運行預覽工程
1,工程建立完成之後,便可以啟動工程,開始開發和調試。
啟動工程,首先要使用命令列工具進入工程更目錄,然後運行如下指令
$ yarn start
工程 啟動之後,會產生一個二維碼和一個本地連結,通過此此二維碼或本地連結,便可預覽工程運行效果。
這就是代表著你的項目已經跑起來了,如何看效果呢?那就看英文字元,提示:想預覽你的app載入出來是什麼吊樣,那麼就用expo app的掃碼工具掃一掃吧,你就可以看見你的項目運行起來是什麼吊樣了!
expo是什麼,如何找到expo並安裝expo呢?去expo官網 https://expo.io 好多人反應官網上下載expo有問題,並且也有人加我找我要,這裡如果你們有問題的話,可以直接存取下面我給出的expo下載連結,直接下載!
按 a 開啟該項目在android 或 模擬器上開發裝置上
按 q 展示二維碼
按 r 重新載入資源套件
按R 重新載入資源套件,並清楚緩衝
好了,下面我給大家提供一點資料:
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,建立工程的運行效果為:
注意:expo上看你開發的app效果有兩種途徑:1.手機上直接掃碼就可以了 2.複製exp://xxxx.xx.xx.xx那個連結,到project上收索該地址,可以看到項目,
在IDE中編寫代碼,查看效果!
熟話說,工欲善其事,必先利其器,這裡我推薦大家用 vs code編輯器敲代碼,效果是非常爽的!
找到我們剛才建立的項目,有vs code開啟它,並且編寫代碼!
在我修改了內容之後,app的內容也發生了變化!
用vs code寫rn的話,我在推薦大家安裝幾個外掛程式,安裝外掛程式的目的是為了更加高效的開發
好了,到這一步,我們的app就算是跑起來了,如果你耐心的和我學到了這裡,那麼恭喜你,你很牛逼,因為我第一搞這個的時候,搞了兩天,還是一臉蒙蔽!
後續文章持續更新,敬請期待!
文章為作者原創,轉載請註明出處。