React Native環境安裝、并啟用真機調試

準備工作

下載必備軟件
軟件列表
- Node.js
  地址：https://nodejs.org/en/（下載LTS版本）
- Java Development Kit（JDK）
  地址：http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

以上所有軟件百度網盤下載地址：http://pan.baidu.com/s/1nvjkaAP

安裝軟件

安裝以下軟件

Node.js
JDK

以上三個軟件，請按照默認路徑安裝

開始安裝React-native

在cmd彈出如下命令窗

命令窗

在windows7系統下，同時按住”win+r”組合鍵，彈出如下窗口
在“打開”旁邊的輸入框中輸入“cmd”，然后按下確定

運行窗口

即可彈出如下命令框

命令窗

在彈出的命令框當中輸入以下指令，回車
npm config set registry https://registry.npm.taobao.org --global
輸入完成后，回車，輸入下一條指令
npm config set disturl https://npm.taobao.org/dist --global

效果

以上指令的目的是在于將npm下載的地址轉為國內的地址，加快下載速度，至于npm是什么有興趣的同學，可以自行百度，與你們之前下載的node.js有關

設置完地址后，接下來需要安裝react-native-cli，在命令行當中輸入如下指令，回車：
npm install -g react-native-cli

安裝react-native-cli

如圖顯示，安裝成功

安裝成功

注意：
react-native-cli是一個終端命令，它可以完成其余的設置工作。它可以通過npm安裝。剛才這條命令會往你的終端安裝一個叫做react-native
的命令。這個安裝過程你只需要進行一次。

大家注意我們目前的命令窗口，圓圈處的部分，該部分為當前路徑

38.png

舉個例子，就像你開了一個文件窗口，路徑如下
與其性質是一樣的

普通windows窗口

那么我們不想把文件放在這里，怎么辦？？那就切換路徑，和大家平時切換硬盤存文件是一個道理，在命令行中輸入如下指令，回車
d:

進入D盤

你會發現你的前面路徑已經變為D盤了
同樣的，如果你想換成E、F、G盤都沒問題，換一下“d:”就可以了

接著，初始化一個react-native項目，在命令行中輸入如下指令，回車：
react-native init SampleAppMovies
這個命令會初始化一個工程、下載React Native的所有源代碼和依賴包

出現如下字樣時，請耐心等待

安裝中，請等待

顯示如下字樣時，證明已經安裝完成

42.png

請注意命令行當中的提示

To run your app on iOS:
cd C:\SampleAppMovies
react-native run-ios
- or -
Open C:\SampleAppMovies\ios\SampleAppMovies.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected
cd C:\SampleAppMovies
react-native run-android

該提示當中已經說明如何在Android當中運行React Native

先開啟虛擬機后，再在命令行當中輸入
cd C:\SampleAppMovies
切換至對應的文件夾

注意：示例當中是安裝在C盤，請不要模仿輸入，按照你自己的安裝路徑進行輸入，具體參見安裝完成后的不同提示

到此React-Native 已經安裝完成了

測試是否安裝成功輸入命令 react-native start 在谷歌瀏覽器地址欄輸入 http://localhost:8081 出現React Native packager is running. Visit documentation 表示已經安裝成功了

Android手機調試運行React Native項目

前言:由于Android自帶的AVD模擬器運行速度慢，使用genymotion模擬器還要安裝其他軟件并且可能出現一些未知的錯誤，所以建議采用Android真機運行。以下操作建立在搭建好ReactNactive環境的前提下。

通過USB將手機和電腦連接，打開手機上的USB調試

如何開啟USB調試？（Android手機型號眾多，可能方式不太一樣，這里以小米手機為例）

點擊進入設置->關于手機，連續點擊幾次MIUI版本，觸發開發者模式。

進入設置->其他高級設置,就可以看到開發者選項了，在開發者選項里打開USB調試，之后彈出一個提示窗口，點擊確定。

這時在cmd命令行或Cygwin輸入adb devices就可以看到設備已連接

運行RN項目時，手機和電腦USB連接并且電腦和手機設備在同一個Wifi網絡環境下。

跟在模擬器運行時的方式差不多，在Cygwin輸入npm start，接著再開一個窗口輸入react-native run-android。如果手機沒有打開USB調試，則會報異常。

部署成功如下圖所示:

在真機上運行時可能會遇到白屏的情況，請找到并開啟懸浮窗權限。比如小米系統的

設置->其他應用管理->(項目名:Myproject)->權限管理->顯示懸浮窗

重新打開項目時會出現如下:

讓調試用電腦和你的手機必須處于相同的 WiFi 網絡中下

1.搖晃手機（也可以按menu鍵，不過現在較新版的手機已經去除這個鍵了）

2.點擊Dev Settings

3.點擊Debug server host&port for devices

輸入 ip地址:端口號，如10.10.10.133:8081

Ip地址根據本機而定，端口號固定為8081

4.點擊Reload JS

最終進入到RN項目的主頁了

以后再運行項目時，可不必用USB連接。直接先在命令行輸入npm start，接著在手機的項目上點擊Reload JS就可以了，前提是手機和電腦需使用同一wifi。（Android 5.0以上及更高版本，可以使用adb reverse命令連接，命令行運行

db reverse tcp:8081 tcp:8081

分類: How to use

好文要頂關注我收藏該文

Superka1
關注 - 0
粉絲 - 0

+加關注

currentDiggType = 0;

posted on 2017-04-08 23:14 Superka1 閱讀(2768) 評論(0) 編輯收藏

</div>

接著，打開webstorm
點擊open，打開新項目

點擊open

或者在窗口中，點擊file=》open

在相應路徑找到SampleAppMovies文件夾，并打開

打開新窗口

雙擊文件夾，展開列表

64.png

點擊index.android.js文件

稍等片刻，上方會出現橫欄，按照圖示點擊Switch，切換到JSX語言

點擊Switch

稍等片刻，在新出現的橫欄中，點擊“Dismiss”
即不將ES6轉化為ES5

點擊Dismiss

接著點擊node_modules，如下圖

node_modules

找到并點擊”react-native”_{>”packager”}>”react-packager”_>”src”>”node-haste”~>”FileWatcher”，
在FileWatcher文件夾下，點擊index.js

找到
const MAX_WAIT_TIME = 120000;
如下圖所示

69.png

將120000改為800000

該設置主要解決，在模擬環境下，修改文件后，雙擊鍵盤R鍵，刷新無響應的情況

此時完成所有初始環境設置

注意

每次調試時
請先打開虛擬機，具體步驟為：

打開android studio
點擊右上方小手機圖標
啟動虛擬機

虛擬機啟動后
請打開命令窗，打開方式詳見初始化React Native，切換到對應的項目文件夾后，在命令行中輸入
react-native run-android
等待所有操作結束后，即可在虛擬機中看到所寫程序

打開webstorm，點擊”index.android.js”文件，即可修改相關代碼，編輯屬于自己的React Native程序

      </div>
    </div>

本文鏈接：https://blog.csdn.net/qq_21937107/article/details/80053347

智能推薦

react-native的windows環境安裝

具體安裝步驟文檔，可看：https://reactnative.cn/docs/getting-started/ windows下面實際不需要安裝python 1:下載集成環境（yarn安裝了就不用安卓了） 2：使用腳手架創建一個項目 3：進入項目 4：打開as（android studio ） 5:啟動項目(--port 1234設置端口號 react-native ...

React Native 調試技巧

一、打開RN開發者菜單不管是真機還是模擬器，都需要首先輸入命令，打開RN開發者菜單，命令如下真機左右搖晃手機幾下，也可以打開開發者菜單菜單如下圖里面有很多選項,例如重新加載程序、Debug模式開啟、實時更新、快速熱修復，類似于instant run、開發者調試設置等等。但是開發者菜單只可在debug版本中調出,假如是apk的release版本則不可調出。二、設置開發者菜單 1.Relo...

React-native Android windows環境配置與真機實連

React-native環境配置作為剛開始學習的小白只是想分析一下我安裝環境以及真機調試的過程。我的電腦是windows系統的 Mac的我不太了解 ps:主要是窮還買不起apple 。哈哈，言歸正傳 1. 安裝python環境可以去官網上下載附上下載地址：https://www.python.org/ 有兩種版本...

React-Native環境配置及調試工具

一、基本環境配置 1、安裝Homebrew 2、下載node.js:brew install node 3、npm安裝 $ npm install -g cnpm –registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org 4、安裝監視文件系統變更...

react-native（無需下載）在 GitHub 的地址 https://github.com/facebook/react-native 按照官方文檔先安裝好 python2.x 再安裝好 node.js 還需要安裝一下 JDK1.8，暫不支持更高版本，而 Android Studio 支持的 JDK 最低版本為 JDK1.8，所以還是就裝 JDK1.8 吧 JDK1.8 下載http:...

React Native環境安裝 、并啟用真機調試

準備工作

安裝軟件

開始安裝React-native

注意

智能推薦

猜你喜歡

React Native環境安裝、并啟用真機調試