在上一篇部落格中我有和大家分享項目環境的配置,今天會給大家分享一下如何搭建一個項目,并讓它在夜神模拟器中成功跑起來,分享的比較直接,隻要按指令來,項目是可以跑起來的哦,希望初學者可以認真按照步驟來搭建項目~~~
1. 全局安裝react-native的腳手架
npm install -g yarn react-native-cli
2. 使用腳手架初始化react-native項目
react-native init 項目名
例如 react-native init reactNativeApp
3. 分析react-native項目目錄結構
4. 把項目運作到模拟器中
1. 連接配接上模拟器 (注意模拟器要啟動)
adb connect 127.0.0.1:62001
2. 提示 successfully 表示連接配接成功
5. 運作目前的react-native的項目
在目前項目的根目錄打開黑窗 運作
react-native run-android
注意第一次運作的時候會下載下傳很多東西 其中有一個打包工具gradle-2.14.1-all
本地已經有了這個檔案 指定下載下傳本地的檔案 不然會很慢
6. 打開目前項目的android檔案夾 》 gradle 》 wrapper 》 gradle-wrapper
修改最後一行代碼 改成本地的檔案
distributionUrl=file\:///C:/android/gradle-2.14.1-all.zip
7. 第二次運作的時候先檢查node的黑窗是否關閉 再重新允許 react-native run-android
8. 第一次啟動項目的時候還會報一個紅色的錯誤:意思是沒有擷取到代碼(代碼是在nodejs的伺服器裡面 沒有辦法從App裡面請求到Nodejs伺服器)
1. 點選右側的中間的菜單
2. dev Settings
3. 點選debug server host 在輸入框裡面輸入目前電腦的IP加上nodejs的端口
例如 192.168.19.22:8081
4. 重新運作項目
5. 在App裡面看到welcome to React Native 就表示項目運作成功
以下是搭建項目的相關截圖:
标題