Windows版本搭建安裝React Native環境配置

  • 最近需要使用Rn,記錄下搭建步奏

1.下載node 安裝包,傻瓜式安裝,安裝完畢之后,在命令還查看是否安裝完成

Paste_Image.png

如果出現上面提示就是安裝成功

2.猶豫我是做安卓的所以 安裝Java,安裝SDK,這兩個環境已經安裝完畢了。所以直接下載安裝安裝git GUI圖形化工具,然后在自己的文件夾下建立一個文件夾,選擇git init here
初始化Git,在選擇 git gui 顯示出GUI畫面,輸入git clone https://github.com/facebook/react-native.git,等待下載

Paste_Image.png

下載完畢

Paste_Image.png

3.進入剛剛目錄下的react-native目錄下的react-native-cli目錄,輸入npm install -g
shit+右鍵在此處打開命令行,輸入此命令

Paste_Image.png

安裝好之后,可以命令行下就有react-native命令了

4.開始創建Rn項目

進入你希望創建項目的目錄后,輸入react-native init (xxx)項目名字,等待一段時間(較慢)

Paste_Image.png

這一步如果太慢,可以自己去下載YARN https://yarnpkg.com/zh-Hans/docs/install#windows-tab 進行安裝,應為他會先去下載YARN

進度看這里:

Paste_Image.png

建議設置 npm 鏡像以加速后面的過程(或使用科學上網工具)。

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

5.細心等待

Paste_Image.png

這樣就成功啦!

6.開啟本地node服務
在命令行中進入項目目錄,輸入react-native start,等待一段時間:

Paste_Image.png

然后在瀏覽器輸入下面地址:http://localhost:8081/index.android.bundle?platform=android

Paste_Image.png

7.這里如果直接去 react-native run-android會有問題的,因為會有各種依賴需要下載,這里最好打開Androidstudio用AS來下載各種依賴

Paste_Image.png

正常導入AS的效果,然后在自己的工程目錄下運行react-native run-android,或者直接在AS中運行。

Paste_Image.png

最后看到下面界面就可以了。

Paste_Image.png

如果不行,搖下設置下ip就行啦!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容