關於react-native開發環境安裝以及遇到的坑介紹

由於最近把電腦系統從window7升級到window10原來的react-native項目跑不起來折騰了1-2天,這次得地把react-native安裝的步驟以及遇到的坑寫下來,防止以後繼續踩坑以及給其他同樣遇到這樣問題的開發者提供一些幫助。

目標平臺

android和window10

安裝

必需的軟件

Python 2

直接去官方下載安裝包然後雙擊安裝即可,我裝的是python2.7.6。

csdn下載地址:https://download.csdn.net/download/qq243348167/12535314

node

直接去官方下載安裝包然後雙擊安裝即可,我裝的是node-v8.16.2-x64。

csdn下載地址:https://download.csdn.net/download/qq243348167/12535329

安裝完 node 後建議設置 npm 鏡像以加速後面的過程(或使用科學上網工具)。注意:不要使用 cnpm!cnpm 安裝的模塊路徑比較奇怪,packager 不能正常識別!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

Yarn、React Native 的命令行工具(react-native-cli)

npm install -g yarn react-native-cli

安裝完 yarn 後同理也要設置鏡像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

Android Studio

React Native 目前需要Android Studio2.0 或更高版本。我安裝的是2.2.3。

確定所有安裝都勾選了,尤其是Android SDKAndroid Device Emulator

在初步安裝完成後,選擇Custom安裝項:

custom installation

檢查已安裝的組件,尤其是模擬器和 HAXM 加速驅動。

SDK Platforms窗口中,選擇Show Package Details,然後在Android 6.0 (Marshmallow)中勾選Google APIsAndroid SDK Platform 23Intel x86 Atom System ImageIntel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image

SDK Tools窗口中,選擇Show Package Details,然後在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1(必須是這個版本)。然後還要勾選最底部的Android Support Repository.

Android Studio一開始安裝2.1.3在編譯到模擬器的時候報錯說和gradle的版本不止一致。我這邊項目gradle版本是gradle-2.14.1-all,下面是gradle對應Gradle插件的版本,Gradle插件版本要和Android Studio的版本一致。

Android Studio項目編譯的時候一直報錯 Gradle sync failed: Connection reset,這是因爲services.gradle.org/distributions無法訪問,可以把對應的gradle下載到本地然後在gradle-wrapper.properties中如下配置。

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=file:///D:/project/gradle/gradle-2.14.1-all.zip

或使用科學上網工具在gradle.properties配置。

systemProp.https.proxyPassword=
systemProp.https.proxyHost=127.0.0.1
systemProp.http.proxyHost=127.0.0.1
systemProp.https.proxyPort=60210
systemProp.https.nonProxyHosts=
systemProp.https.proxyUser=

夜神模擬器

直接去官方下載安裝包然後雙擊安裝即可。

首先運行夜神模擬器,通過cmd命令窗口進入sdk目錄使用adb命令連接模擬器。

cd C:\Users\Administrator\AppData\Local\Android\sdk\platform-tools
adb.exe connect 127.0.0.1:62001
adb devices--查看已經連接成功的設備

在Android Studio中點擊運行即可把項目運行到模擬器

在模擬器中設置代理IP,這邊我電腦的IP是172.18.1.141,所以配置的是172.18.1.141:8081

在cmd命令窗口進入我們的項目執行以下命令程序即可正常運行。

cd D:\project\SHServiceApp
npm start

其他操作

到這裏我們的項目就可以正常跑起來了。如果你要把項目打包成apk文件,在cmd命令窗口執行以下命令即可。在項目的D:\project\SHServiceApp\android\app\build\outputs\apk這個文件夾中會生成對應的apk文件。

$ cd android && .\gradlew assembleRelease

下面介紹一下項目初始化的命令

react-native init SHServiceApp --version 0.44.3
npm install
 

下面介紹一下插件的安裝以及卸載,以爲例react-native-easy-toast

npm install react-native-easy-toast
npm uninstall  react-native-easy-toast

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章