作為第一次用rn開發的小白只有參照。
可以借鑑的 https://reactnative.cn/docs/0.51/getting-started.html#content
簡單粗暴,直接上碼
看到官方文件要下載那麼多,說實話,看到打腦殼。希望直接裝載好依賴直接看到介面,我喜歡簡單粗暴
1.下載Node
choco install nodejs.install
複製程式碼
2.下載react-native,這裡AwesomeProject
是專案的名字
react-native init AwesomeProject
複製程式碼
3.進入專案
cd AwesomeProject
複製程式碼
4.啟動安卓模擬器,這裡啟動的時候需要在Visual Studio啟動,可以參考下面圖片來啟動
react-native run-android
複製程式碼
- 在Visual studio 裡面找到這個小手機點選開啟,這裡有個坑。有可能啟動找不到小手機。需要看右下角點選configer。或者重啟一下
- 一般我用API25的版本。
- 啟動完成的介面,進行頁面書寫可以在app.js檔案。或者你從新建個src檔案也行。這裡啟動也有個坑。需要去配置個東西
這裡最麻煩的是就是Visual Studio 的配置,具體的可以參考官方的API.
5.App啟動流程
- 目錄“..\android\app\build.gradle” android裡面的,ndk看下是不是
abiFilters "armeabi-v7a", "x86"
- “..\android\app\proguard-rules.pro” 最後的地方
-keep class android.text { ;} -dontwarn android.text.
- “..\android\gradle.properties” 最後的地方,這裡進行配置埠,賬號密碼是你電腦的
org.gradle.jvmargs=-Xmx2048m systemProp.http.proxyHost=s1firewall systemProp.http.proxyPort=8080 systemProp.http.proxyUser= systemProp.http.proxyPassword= systemProp.https.proxyHost=s1firewall systemProp.https.proxyPort=8080 systemProp.https.proxyUser= systemProp.https.proxyPassword=
- 開啟模擬器 確認8081埠是否被佔用 如果被佔用關閉8081埠
netstat -aon|findstr "8081" 這個是確認埠是否被佔用 taskkill /F /PID <idCode> 這裡填寫需要關閉的埠號
複製程式碼
-
確保已經連線到模擬器 在APP目錄下輸入 react-native run-android 執行
-
虛擬機器快捷鍵
Android: ctrl+M 開啟選項 連續點選兩次R鍵重新整理
ios: command+d 開啟選項 Command⌘ + R 重新整理