Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> React-native Android環境安裝(Windows10)

React-native Android環境安裝(Windows10)

編輯:關於Android編程

搭建React-native環境

首先你必須要裝好JAVA JDK,然後版本要在1.8以上.

下載1.8 版本(64位或32位SDK) 下載網站-http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下載安裝後相關環境變量的配置 Cmd開啟命令提示符,寫入java測試是否安裝成功

命令提示符

然後就是安裝AndroidStudio,並下載相關的SDK<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwPjEutePRobalsr/AuCBGaWxlJm5kYXNoOyZndDtTZXR0aW5ncyZuZGFzaDsmZ3Q7QXBwZWFyYW5jZSZuZGFzaDsmZ3Q7U3lzdGVtIFNldHRpbmdzPGJyIC8+DQombmRhc2g7Jmd0O0FuZHJvaWRTZGs8L3A+DQo8cD4yLkFuZG9yaWRTREtMb2NhdGlvbiC149GhRWRpdNGh1PHE41NES87EvP680LXEzrvWwyzIu7rzv8nS1NTaQW5kcm9pZHN0dWRpb9bQz8LU2FNESyzI57n7vvW1w8yrwv0s0rK/ydLUyKXN+MnP1Ni6wyy3xcjrzsS8/rzQPGJyIC8+DQos1NrU2Mjrvs3Q0CzB7c3iLGFuZHJvaWQtMjPV4tK7tqjSqtTYLNauuvPU2ta00NByZWFjdMb0tq+yxbK7u+HT0M7KzOI8L3A+DQo8cD48aW1nIGFsdD0="AndroidSdk下載" src="/uploadfile/Collfiles/20160806/20160806091703912.png" title="\" />

3.ANDROID_HOME(SDK)環境配置
控制面板->系統安全->系統->高級安全設置

這裡寫圖片描述

4.環境變量->系統變量中新增ANDROID_HOME->加入SDK的位置

5.在path裡填入%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
測試是否成功可以在命令提示符下鍵入adb 測試

這裡寫圖片描述

6.下載Node.js, https://nodejs.org/en/, v6.3.1Current,裝上他!

這裡寫圖片描述

7.然後在你的nodejs command prompt中鍵入
npm config set registry https://registry.npm.taobao.org (淘寶提供的鏡像)
npm config set disturl https://npm.taobao.org/dist
npm install -g react-native-cli (安裝react-native)

建立一個RN的項目

自建一個文件夾, AwesomeProject,然後啟動項目
鍵入react-native run-anroid
react-native run-android

Build Successful 代表建立成功,如果Build Faild就必須檢查配置那裡沒配好

這裡寫圖片描述

啟動後就會彈出react得server

react packager

可以在虛擬機或者真機上進行測試,我測試的時後是用真機去測試,裝完之後檢查手機上會有個AwesomeProject 的 APP

首次進入他會有報錯,會出現Could not to development server,但是這很正常,因為手機網路跟你電腦的本機網路並沒有在同一個內網上面,所以你手機必須連上你電腦端的Server

這裡寫圖片描述

你可以在windows上裝個wifi共享熱點,騰訊管家wifi共享,獵豹wifi共享
網上都可以載得到,載完之後用手機連進這個wifi.

打開APP之後,記住這個手勢~你先要搖一搖~(附近沒有美女,笑)~然後他會有個

彈窗跳出,點最下面的Dev Settings,進去之後點最下面 Debug Server host&port for device, 寫下你的ip,記得後面必須加上:8081,才能連上

 

搖一搖後跳出彈窗

 

 

Dev Settings進入畫面

 

 

 

 

連上後畫面

 

這裡寫圖片描述

 

React-Native熱更新功能 Enable hot reloading

一樣的方式,在手機搖一搖彈窗中的Enable hot reloading點他

,你就可以js更新的時後及時更新手機頁面

在index.android.js項目中修改

 

這裡寫圖片描述

 

 

這裡寫圖片描述

 

以上就是在Window10中安裝react-native,不專業解說~有任何問題可以私Q我

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved