天天看點

React Native 項目的搭建

    在上一篇部落格中我有和大家分享項目環境的配置,今天會給大家分享一下如何搭建一個項目,并讓它在夜神模拟器中成功跑起來,分享的比較直接,隻要按指令來,項目是可以跑起來的哦,希望初學者可以認真按照步驟來搭建項目~~~

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 就表示項目運作成功
           

以下是搭建項目的相關截圖:

React Native 項目的搭建

标題

React Native 項目的搭建
React Native 項目的搭建
React Native 項目的搭建
React Native 項目的搭建