如何配置React Native真机调试_百度知道
如何配置React Native真机调试
我有更好的答案
点击当前选中的模拟设备即可展示所有设备，你可以在系统设置/网络里找到电脑的IP地址，连接到你的电脑，把localhost改为你的电脑的IP。选择设备：把手机插上数据线，如下图。在Mac系统下，这时候就可以在调试设备里，看到你自己的设备修改URL地址：打开项目目录下的AppDelegate.m文件，修改里面的URL
为您推荐：
其他类似问题
您可能关注的内容
react的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。React Native调试方法
访问App内的开发菜单
你可以通过摇晃你的设备或者选择iOS模拟器的Hardware菜单中的&Shake Gesture&来打开开发者菜单。你还可以在app运行于iPhone模拟器时使用Command+D快捷键，或者在运行模拟器时使用Command+M快捷键。
注意：在成品（release喎"/kf/ware/vc/" target="_blank" class="keylink">vcHJvZHVjYXRpb24gYnVpbGRzo6nW0L+qt6LV37LLtaW74bG7udix1aGjPC9wPg0KPC9ibG9ja3F1b3RlPg0KPGgyIGlkPQ=="刷新javascript">刷新Script
不用每次你有改变时都重新编译你的app，你可以直接重载你app的代码。要这样做，就选择开发者菜单中的&Reload&。你也可以在iOS模拟器中按Command+R或者在Android模拟器中按两次R。
如果Command+R快捷键没能重载iOS模拟器，去往Hardware菜单，选择Keyboard，然后确保&Connect Hardware Keyboard&是勾选的。
你可以通过让你的app在你改变代码时自动重载来加快你的开发速度。自动重载可以在开发者菜单中选择&Enable Live Reload&来打开。
更进一步你可能想在添加新文件到JavaScript包中时保持app运行新的版本，可以通过选择开发者菜单中的&Enable Hot Reloading&来打开。这可以让你在重载中保持app的状态。
有一些热重载无法完美实现的情况。如果运行到了任何问题，使用全重载来重置你的app。
对于下面这些情况你可能需要重构你的app来让改变生效：
你添加了新的资源到你原生app的包中，比如iOS的Images.xcassets中的图片或者Android的res/drawable文件夹。 你修改了原生代码（iOS上的Objective-C/Swift或者Android中的Java/C++）.
应用内的错误与警告提示（红屏和黄屏）
错误和警告会在开发构建时显示在你的app中。
错误（Errors）
app中的错误会在你的app中用红色背景的全屏显示。这个屏幕也叫RedBox。你可以使用 console.error() 来手动触发一个。
警告（Warnings）
警告会在屏幕上用黄色背景显示。这些警告条也叫YellowBox。点击警告条来显示更多信息或者让它们不显示。
和RedBox一样，你可以使用 console.warn() 来触发一个YellowBox。
YellowBox可以通过使用 console.disableYellowBox = 来在开发过程中关闭。特定的警告可以通过设置要忽略的前缀数组来说的手动忽略：console.ignoredYellowBox = [&Warning:&&]
RedBox和YellowBox在发布构建中都是自动关闭的
访问控制台日志
app运行时你可以通过在终端使用下面的命令为iOS和Android app显示控制台日志：
react?nativelog?ios react-native log-android
你也可以通过在iOS模拟器中访问 Debug -& Open System Log& 或者在Android app在设备或者模拟器上运行时在终端中运行 adb logcat *:S ReactNative:V ReactNativeJS:V 。
Chrome 开发者工具
在开发者菜单选择&Debug JS Remotely&来在Chrome中调试JS代码。这会打开一个新的tab为。
在Chrome的菜单中选择 Tools -& Developer Tools 来打开开发者工具。你也可以使用快捷键（Mac上为Command+Option+I，Windows上为Ctrl+Shift+I）来访问开发者工具。你可能还会打开 Pause On Caught Exceptions 来获取更好的调试体验。
现在还不可能在Chrome开发者工具中使用&React&tab来检查app小部件。你可以使用Nuclide的&React Native Inspector&作为工作区。
使用Chrome开发者工具在设备上调试
在iOS设备上，打开 RCTWebSocketExecutor.m 文件并将&localhost&改为你电脑的IP，然后在开发者菜单中选择&Debug JS Remotely&.
在通过USB连接的Android 5.0+设备上，你可以使用 adb command line tool 来设置端口从设备转发到你的电脑：
adb reverse tcp:8081 tcp:8081
或者，在开发者菜单选择&Dev Settings&，然后更新&Debug server host for device&的设置来匹配你电脑的IP地址。
如果运行到任何问题，可能是你的某个Chrome扩展程序不小心干扰了调试器。尝试禁用所有的扩展器然后重新一个个地打开它们直到你找到有问题的扩展程序。
使用自定义的JS调试器
设置 REACT_DEBUGGER 环境变量为启动你的自定义调试器的命令来使用自定义的JS调试器来代替Chrome开发者工具。然后你就可以在开发者菜单中选择&Debug JS Remotely&来开始调试。
调试器会接收一系列所有的项目根，通过空间分隔开。比如说，如果你设置 REACT_DEBUGGER=&node/path/to/launchDebugger.js &port 2345 &type ReactNative&，然后 node/path/to/launchDebugger.js &port 2345 &type ReactNative /path/to/reactNative/app 命令会被用来启动你的调试器。
通过这种方式执行的自定义调试器命令应该是短周期的进程，并且它们不应该产生超过200千字节的输出。
在Android上用Stetho调试
1、在 android/app/build.gradle中，添加
compile &com.facebook.stetho:stetho:1.3.1&
compile &com.facebook.stetho:stetho-okhttp3:1.3.1&
2、在 android/app/src/main/java/com/{yourAppName}/MainApplication.java 中，添加下面的导入：
import com.facebook.react.modules.network.ReactCookieJarC
import com.facebook.stetho.S
import okhttp3.OkHttpC
import com.facebook.react.modules.network.OkHttpClientP
import com.facebook.stetho.okhttp3.StethoI
import java.util.concurrent.TimeU
3、在 android/app/src/main/java/com/{yourAppName}/MainApplication.java 中，添加函数：
public void onCreate() {
super.onCreate();
Stetho.initializeWithDefaults(this);
OkHttpClient client = new OkHttpClient.Builder()
.connectTimeout(0, TimeUnit.MILLISECONDS)
.readTimeout(0, TimeUnit.MILLISECONDS)
.writeTimeout(0, TimeUnit.MILLISECONDS)
.cookieJar(new ReactCookieJarContainer())
.addNetworkInterceptor(new StethoInterceptor())
OkHttpClientProvider.replaceOkHttpClient(client);
4、运行 react-native run-android
5、在新的chrome标签中，打开：chrome://inspect，点击 &Inspect device& （&Powered by Stetho&后面的那个）
调试原生代码
当使用原生代码时（比如编写原生时）你可以和构建标准的原生app一样在Android Studio或者Xcode启动app并获取其调试功能（设置断点等等）。
你可以通过在开发者菜单中选择&Perf Monitor&打开一个性能覆盖来帮助你调试性能问题。React Native搭建iOS开发环境
转载 & & 投稿：daisy
React Native的门槛不管是对于前端开发者还是移动端开发者来说都是很高的，既要懂原生又要懂js，技术栈是相当长的。但是没有关系，下面我们一步步来学习，慢慢成长吧！
一、写在前面
1. 什么是React-Native？
React-Native是：Facebook 在2015年初React.js技术研讨大会上公布的一个开源项目。支持用开源的JavaScript库React.js来开发iOS和Android原生App。初期仅支持iOS平台，同年9月份，该开源项目同时支持Android平台。
React Native的原理是：在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以&View&取代&div&，以&Image&替代&img&等。
2.React-Native有啥优缺点？
优点是：能够用JavaScript脚本就可以写出App的界面，对从事Web开发的同事们转行做几个简单的移动App是个福利。不用为了写个移动App小程序而专门去学习Objective-C和Swift。
和其他的移动Web框架相比：
&&&&& Native不用WebView，彻底摆脱了WebView让人不爽的交互和性能问题；
&&&&& Native的原生控件有更好的体验；
&&&&& Native有更好的手势识别；
&&&&& Native有更适合的线程模型；
缺点是：还在试用阶段，潜在的问题尚不得而知：兼容性问题，性能问题等。还没大量普及，学习资料尚且不多，供爱折腾的朋友尝尝鲜。　　
3.要学些什么？
想必，大家已经按耐不住，会发问，使用React-Native开发要学习些什么呢？
&&&&& Html+CSS+JavaScript的基本功肯定是少不了；
&&&&& Node.js的基本概念学习。API文档：
&&&&& JSX: JavaScript语法的一个扩展，类似XML结构。https://facebook.github.io/react/docs/jsx-in-depth.html
&&&&& FLUX: Facebook公司的一个创建用户客户端web程序的框架。https://facebook.github.io/flux/docs/overview.html
二、React Native基础环境搭建
1、安装Homebrew
打开终端输入：
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、安装nvm方法
通过脚本安装方式，在终端执行：
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash
激活nvm,在安装脚本执行完之后，在终端执行:
. ~/.nvm/nvm.sh
3、默认安装最新版本的Node.js并且设置好命令行的环境变量
nvm install node && nvm alias default node
可以输入node命令启动Node.js环境
4、安装watchman
在终端输入：
brew install watchman
到此处React Native基础环境搭建基本完成，推荐经常运行brew update && brew upgrade命令保持你的程序是最新的。
三、iOS开发环境
1、iOS开发环境： （默认读者已经安装Xcode7.0或以上版本，没有可自行前往AppStore下载）
使用npm（node包管理工具）安装react-native-cli(此处应注意权限问题，如果遇到权限问题，请在下面的命令前加上sudo)
npm install -g react-native-cli
初始化工程（下面的语句中千万不要加sudo，后果自负）
react-native init ReactNativeProject（工程名）
在初始化的过程中，如果进度缓慢，推荐你将npm仓库源换成国内镜像：(翻墙用户请忽略) 在终端输入：
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
2、使用Xcode运行调试程序
查找ReactNativeProject文件目录
按住快捷键Command+Shift+G，在弹出的“前往文件夹”对话框中输入路径/Users/yangshebing/ReactNativeProject（yangshebing表示电脑用户名，请自行更改）,点击前往。在文件目中的ios文件夹下找到“ReactNativeProject.xcodeproj”工程文件。如图所示：
运行ReactNativeProject工程
使用Xcode打开“ReactNativeProject.xcodeproj”工程文件，按住快捷键"Command+R"运行此项目，运行成功后便可在模拟器上看到效果。
编辑index.ios.js文件修改界面
笔者编辑index.ios.js文件工具是Vim，每当编辑完index.ios.js文件并保存之后，在模拟器(Simulator)中，按Command+R可刷新界面查看改变后的效果。
下面我们也试着稍微修改一下index.ios.js文件：
* Sample React Native App
* https://github.com/facebook/react-native
'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
//添加Image全局变量
} from 'react-native';
class ReactNativeProject extends Component {
render() {
&View style={styles.container}&
//添加文本展示
&Text style={styles.welcome}&
//添加图片展示
//这里需要指定图片的大小
style={styles.picture} /&
const styles = StyleSheet.create({
container: {
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
//这里可以设置文本的字体，对齐方式等
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
//新增图片style，设置图片大小
picture: {
width: 80,
height: 150,
AppRegistry.registerComponent('ReactNativeProject', () =& ReactNativeProject);
刷新后运行效果如下图所示：
真机运行调试项目
在ReactNativeProject工程中找到AppDelegate.m文件，将localhost替换成自己电脑的IP地址。
// jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
jsCodeLocation = [NSURL URLWithString:@];
替换完成之后再次运行程序，这个时候可以通过摇晃设备唤出开发菜单。
禁用开发菜单
在打包提交市场前，需要禁用开发菜单。禁用开发菜单方法如下： 打开工程，选择Product → Scheme → Edit Scheme或使用快捷键“Command + &”,在弹出的窗口中选择左边的Run菜单项。更改“Build Configuration” 设置项为“Release”。
好了，看到这里，如果你已经成功配置了React-Native的环境，并且新建并成功运行了第一个程序了。那么，就先恭喜了，我们甚至没有写一行代码，就已经成功运行了第一个React-Native的程序，是不是还挺简单的。正所谓，良好的开端是成功的一半。如果有问题大家可以留言交流。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)16被浏览8,981分享邀请回答65 条评论分享收藏感谢收起buildscript {
repositories {
mavenLocal()
dependencies {
classpath 'com.android.tools.build:gradle:1.2.3' // 修改1.2.3
classpath 'de.undercouch:gradle-download-task:2.0.0'
// NOTE: Do not place your applicati they belong
// in the individual module build.gradle files
并且设置 Gradle 的 Wrapper为
gradle-2.2-all.zip21 条评论分享收藏感谢收起