Windows上搭建React-Native開發環境

作者： cfscc
發布時間：2020-05-13
1004 次瀏覽
暫無評論
2727字數
分類：程序代碼

Loading...

Windows上搭建React-Native開發環境

云霧雨煙 2017-06-21 18:19:09   2785   收藏
展開
技術是進步的，如果你還在為糾結學習Android還是IOS，那么你已經OUT了，這是網友說的。React-Native怎么樣我還不知道，只知道要學習這個東西。今天給大家說一說，如何在Windows上搭建React-Native的開發環境。

第一步：如果你是Android開發者，那么你的Android Studio環境一定是沒問題的。這一步就是搭好Android Studio環境，直到你能跑起來一個Android工程！網上教程很多！

第二步：安裝一個Git工具。鏈接直達：http://blog.csdn.net/itpinpai/article/details/48105445

第三步：安裝Node.js。鏈接直達：https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

第四步：這才是重要的一步，下載React-Native相關工具。 
1、在合適的位置創建一個文件夾(這個位置確保不會被刪)：ReactNative； 
2、進入ReactNative文件夾中（此時文件夾是空的，react-native是自動創建的）：右鍵點擊Git Bash Here，彈出一個命令窗口！ 
![2020-05-12T16:28:56.png][1]

3、在窗口中鍵入：git clone https://github.com/facebook/react-native.git 
 ![2020-05-12T16:29:05.png][2]
然后回車鍵，不要關閉命令框，能看見下載進度，等待這個過程下載完成！

4、完成后，為了能夠快速安裝react-native相關工具，我們還需要給node.js的包管理器配置一下代理，代理設置如下： 
在此命令框內執行以下兩句代碼：分開執行，這個過程很快

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
1
2
5、我們就可以直接安裝react-native的包了，首先我們進入剛剛git的下載目錄中，即ReactNative\react-native文件夾中，在空白處，鼠標右鍵—>Git Bash Here，彈出一個命令窗口，鍵入命令：

npm install -g react-native-cli
1
這個過程會會有一點點耗時，等待他完成！

6、現在你自己創建一個工作目錄，比如ReactNativeWorkSpace文件夾;在此文件夾中調出命令窗口（鼠標右鍵—>Git Bash Here）鍵入以下代碼：

react-native init MyReactNative
1
此時系統會創建一個MyReactNative文件夾，命令框中能看到狀態，等待這個過程完成！一般幾分鐘！

7、過程6完成后，在MyReactNative文件夾中調出命令窗口（鼠標右鍵—>Git Bash Here），鍵入以下代碼：

react-native start
1
等待這個過程完成（完成標志：出現React packager ready 字樣），完成過后，這個命令窗口不要關閉（這個命令窗口就像一個服務，后面的操作要基于此，切記這個命令窗口一直都不要關閉）； 
 ![2020-05-12T16:29:26.png][3]
此時，在你的瀏覽器輸入：http://localhost:8081/index.android.bundle?platform=android    或  http://localhost:8081

如果出現下圖：（圖片未截圖完整） 
![2020-05-12T16:29:39.png][4]

表明環境已經成功搭建！如果出錯，多半的原因是，前面的幾條命令，有的未執行完成！就開始執行下一條了！

8、接下來在你的MyReactNative文件夾中調出命令窗口執行以下命令

react-native run-android
1
接下來要做的事情就是等待了！這個過程取決于你的網速，因為要配置gradle，配置完成后，會安裝Apk到你已連接電腦的真機或者是模擬器！這個gradle這個東西，用過Android Studio的都知道，下載慢不說，還容易出錯。其實這會在MyReactNative目錄中，就有一個Android studio工程，你直接用Android studio 打開它就好了。然后在Android studio里面直接運行。 
如果運行結果是一片紅： 
解決辦法一：完成過程7，再安裝apk（或者搖一搖手機，點擊ReLoad）； 
解決辦法二：在你系統cmd中執行：adb reverse tcp:8081 tcp:8081，再安裝apk（或者搖一搖手機，點擊ReLoad）； 
成功你能看到以下界面 
![2020-05-12T16:30:03.png][5]

最后兩行是我自己加的。 
到此環境就配置好了！
————————————————
版權聲明：本文為CSDN博主「云霧雨煙」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u010886975/java/article/details/73553281

[1]: http://www.matrixbk.com/usr/uploads/2020/05/397888231.png
  [2]: http://www.matrixbk.com/usr/uploads/2020/05/1497948664.png
  [3]: http://www.matrixbk.com/usr/uploads/2020/05/795578236.png
  [4]: http://www.matrixbk.com/usr/uploads/2020/05/473839591.png
  [5]: http://www.matrixbk.com/usr/uploads/2020/05/2832416733.png

最后修改：

? 允許規范轉載

如果覺得我的文章對你有用，請隨意贊賞

發表評論取消回復
使用cookie技術保留您的個人信息以便您下次快速評論，繼續評論表示您已同意該條款

評論 *

私密評論

名稱 *

??

郵箱

地址

Windows上搭建React-Native開發環境

cfscc ? 2020 年 05 月 13 日

Loading...

Windows上搭建React-Native開發環境

云霧雨煙 2017-06-21 18:19:09   2785   收藏
展開
技術是進步的，如果你還在為糾結學習Android還是IOS，那么你已經OUT了，這是網友說的。React-Native怎么樣我還不知道，只知道要學習這個東西。今天給大家說一說，如何在Windows上搭建React-Native的開發環境。

第一步：如果你是Android開發者，那么你的Android Studio環境一定是沒問題的。這一步就是搭好Android Studio環境，直到你能跑起來一個Android工程！網上教程很多！

第二步：安裝一個Git工具。鏈接直達：http://blog.csdn.net/itpinpai/article/details/48105445

第三步：安裝Node.js。鏈接直達：https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html

第四步：這才是重要的一步，下載React-Native相關工具。 
1、在合適的位置創建一個文件夾(這個位置確保不會被刪)：ReactNative； 
2、進入ReactNative文件夾中（此時文件夾是空的，react-native是自動創建的）：右鍵點擊Git Bash Here，彈出一個命令窗口！ 
![2020-05-12T16:28:56.png][1]

3、在窗口中鍵入：git clone https://github.com/facebook/react-native.git 
 ![2020-05-12T16:29:05.png][2]
然后回車鍵，不要關閉命令框，能看見下載進度，等待這個過程下載完成！

4、完成后，為了能夠快速安裝react-native相關工具，我們還需要給node.js的包管理器配置一下代理，代理設置如下： 
在此命令框內執行以下兩句代碼：分開執行，這個過程很快

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
1
2
5、我們就可以直接安裝react-native的包了，首先我們進入剛剛git的下載目錄中，即ReactNative\react-native文件夾中，在空白處，鼠標右鍵—>Git Bash Here，彈出一個命令窗口，鍵入命令：

npm install -g react-native-cli
1
這個過程會會有一點點耗時，等待他完成！

6、現在你自己創建一個工作目錄，比如ReactNativeWorkSpace文件夾;在此文件夾中調出命令窗口（鼠標右鍵—>Git Bash Here）鍵入以下代碼：

react-native init MyReactNative
1
此時系統會創建一個MyReactNative文件夾，命令框中能看到狀態，等待這個過程完成！一般幾分鐘！

7、過程6完成后，在MyReactNative文件夾中調出命令窗口（鼠標右鍵—>Git Bash Here），鍵入以下代碼：

react-native start
1
等待這個過程完成（完成標志：出現React packager ready 字樣），完成過后，這個命令窗口不要關閉（這個命令窗口就像一個服務，后面的操作要基于此，切記這個命令窗口一直都不要關閉）； 
 ![2020-05-12T16:29:26.png][3]
此時，在你的瀏覽器輸入：http://localhost:8081/index.android.bundle?platform=android    或  http://localhost:8081

如果出現下圖：（圖片未截圖完整） 
![2020-05-12T16:29:39.png][4]

表明環境已經成功搭建！如果出錯，多半的原因是，前面的幾條命令，有的未執行完成！就開始執行下一條了！

8、接下來在你的MyReactNative文件夾中調出命令窗口執行以下命令

react-native run-android
1
接下來要做的事情就是等待了！這個過程取決于你的網速，因為要配置gradle，配置完成后，會安裝Apk到你已連接電腦的真機或者是模擬器！這個gradle這個東西，用過Android Studio的都知道，下載慢不說，還容易出錯。其實這會在MyReactNative目錄中，就有一個Android studio工程，你直接用Android studio 打開它就好了。然后在Android studio里面直接運行。 
如果運行結果是一片紅： 
解決辦法一：完成過程7，再安裝apk（或者搖一搖手機，點擊ReLoad）； 
解決辦法二：在你系統cmd中執行：adb reverse tcp:8081 tcp:8081，再安裝apk（或者搖一搖手機，點擊ReLoad）； 
成功你能看到以下界面 
![2020-05-12T16:30:03.png][5]

最后兩行是我自己加的。 
到此環境就配置好了！
————————————————
版權聲明：本文為CSDN博主「云霧雨煙」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u010886975/java/article/details/73553281

[1]: http://www.matrixbk.com/usr/uploads/2020/05/397888231.png
  [2]: http://www.matrixbk.com/usr/uploads/2020/05/1497948664.png
  [3]: http://www.matrixbk.com/usr/uploads/2020/05/795578236.png
  [4]: http://www.matrixbk.com/usr/uploads/2020/05/473839591.png
  [5]: http://www.matrixbk.com/usr/uploads/2020/05/2832416733.png

天天日天天干天天_黄片免费在线播放_性开放按摩av片_18禁裸体黑丝美女自慰网站。