1. 程式人生 > >Windows上搭建React-Native開發環境

Windows上搭建React-Native開發環境

技術是進步的,如果你還在為糾結學習Android還是IOS,那麼你已經OUT了,這是網友說的。React-Native怎麼樣我還不知道,只知道要學習這個東西。今天給大家說一說,如何在Windows上搭建React-Native的開發環境。

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

第四步:這才是重要的一步,下載React-Native相關工具。
1、在合適的位置建立一個資料夾(這個位置確保不會被刪):ReactNative;
2、進入ReactNative資料夾中(此時資料夾是空的,react-native是自動建立的):右鍵點選Git Bash Here,彈出一個命令視窗!
這裡寫圖片描述

3、在視窗中鍵入:git clone https://github.com/facebook/react-native.git
這裡寫圖片描述
然後回車鍵,不要關閉命令框,能看見下載進度,等待這個過程下載完成!

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

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

5、我們就可以直接安裝react-native的包了,首先我們進入剛剛git的下載目錄中,即ReactNative\react-native資料夾中,在空白處,滑鼠右鍵—>Git Bash Here,彈出一個命令視窗,鍵入命令:

npm install -g react-native-cli

這個過程會會有一點點耗時,等待他完成!

6、現在你自己建立一個工作目錄,比如ReactNativeWorkSpace資料夾;在此資料夾中調出命令視窗(滑鼠右鍵—>Git Bash Here)鍵入以下程式碼:

react-native init MyReactNative

此時系統會建立一個MyReactNative資料夾,命令框中能看到狀態,等待這個過程完成!一般幾分鐘!

7、過程6完成後,在MyReactNative資料夾中調出命令視窗(滑鼠右鍵—>Git Bash Here),鍵入以下程式碼:

react-native start

等待這個過程完成(完成標誌:出現React packager ready 字樣),完成過後,這個命令視窗不要關閉(這個命令視窗就像一個服務,後面的操作要基於此,切記這個命令視窗一直都不要關閉);
這裡寫圖片描述
此時,在你的瀏覽器輸入:http://localhost:8081/index.android.bundle?platform=android

如果出現下圖:(圖片未截圖完整)
這裡寫圖片描述

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

8、接下來在你的MyReactNative資料夾中調出命令視窗執行以下命令

react-native run-android

接下來要做的事情就是等待了!這個過程取決於你的網速,因為要配置gradle,配置完成後,會安裝Apk到你已連線電腦的真機或者是模擬器!這個gradle這個東西,用過Android Studio的都知道,下載慢不說,還容易出錯。其實這會在MyReactNative目錄中,就有一個Android studio工程,你直接用Android studio 開啟它就好了。然後在Android studio裡面直接執行。
如果執行結果是一片紅:
解決辦法一:完成過程7,再安裝apk(或者搖一搖手機,點選ReLoad);
解決辦法二:在你係統cmd中執行:adb reverse tcp:8081 tcp:8081,再安裝apk(或者搖一搖手機,點選ReLoad);
成功你能看到以下介面
這裡寫圖片描述

最後兩行是我自己加的。
到此環境就配置好了!