1. 程式人生 > >最詳細React Native環境配置及專案初始化(2018-10-14)

最詳細React Native環境配置及專案初始化(2018-10-14)

注意配環境一定要全程使用穩定VPN工具,否則會浪費大量時間!!!相信我

一.截止到專案初始化之前也就是執行這條命令之前都按官網的方法就可以

https://reactnative.cn/docs/getting-started.html

react-native init AwesomeProject

二.上面這條命令可別用

不知道有沒有人注意到官網上這個話

提示:你可以使用--version引數(注意是兩個槓)建立指定版本的專案。例如react-native init MyApp --version 0.44.3。注意版本號必須精確到兩個小數點。

這個太重要了。如果你不按這個執行等後續執行"react-native run-android"百分百報錯很難解決,原因就是版本有問題,而且問題很大。

三.執行專案初始化命令

方法一:

初學建議用

react-native init AwesomeProject--version 0.44.3

代替

react-native init AwesomeProject

其實就是用舊的版本,不用最新的版本

方法二:

Expo來搭建。

官網:https://github.com/facebook/react-native

推薦:部落格

概述https://www.jianshu.com/p/217e9f394491

詳細http://www.cnblogs.com/gdsblog/category/1129612.html

這個方法適合純reactnative開發使用,建議第一次學習用react-native時用方法一,原因很多不再累述。

四.下載安裝模擬器

推薦安裝夜神模擬器,我感覺挺好用的,其他推薦的那Geny什麼我用了下真的不好用,還是夜神好

模擬器官網:https://www.yeshen.com/

五.模擬器配置

1.啟動模擬器

2.cmd進入夜神安裝目錄的bin目錄下(直接執行adb devices那麼應該什麼都沒有的)

D:\ReactNative\YeShen\Nox\bin>

執行nox_adb devices

nox_adb devices

然後應該就有模擬器的名字了,一般都是 127.0.0.1:62001

3.cmd進去android的SDK的platform-tools目錄下

D:\adt-bundle-windows-x86\android-sdk\android-sdk\platform-tools>

執行命令

adb.exe connect 127.0.0.1:62001

執行上面程式碼之後,連線時sdk會發現abd是一致的,都是從sdk直接連線模擬器的abd,所以不會被kill掉

重新執行程式碼,如果模擬器上程式出現紅色背景報錯說明沒有連線到node伺服器

解決辦法:還是在SDK的platform-tools目錄下執行:

adb shell input keyevent 82

4.返回專案根目錄將專案打包安裝到模擬器

react-native run-android

5.這時候模擬器會啟動app了

震動模擬器,會出現

點選最下方的Dev settings,然後找到第四條的

Debug server host & port for device

點選後出現

這個裡面填啥呢,別急,跟我來

新開啟一個cmd視窗輸入ipconfig檢視自己電腦的ip地址,然後將 “自己的電腦ip:8081”  填入上圖port中點選確定,再震動重新整理就ok啦。

6.將平板模式改為手機模式

將模擬器的設定點開   系統設定->高階設定->解析度設定->選擇1080*1920 重啟

再次進入  系統設定->高階設定->解析度設定->選擇手機版  

7.完美,開啟react native開發之旅吧

參考:

1.環境配置:

https://reactnative.cn/docs/getting-started.html

https://facebook.github.io/react-native/docs/getting-started.html

https://www.jianshu.com/p/217e9f394491

https://www.cnblogs.com/abelsu/p/5132588.html

2.模擬器配置:

https://blog.csdn.net/qq_33876553/article/details/79855993

https://www.cnblogs.com/hongguang-kim/p/5917633.html

3.RN開始開發:

https://www.cnblogs.com/gdsblog/p/8128113.html