3012人阅读
React Native学习（23）
React Native &内置了几个导航器组件 推荐使用Navigator
&(原因：它是单独使用js实现的一个导航栈 因此 可以跨平台操作 同时便于定制)
场景 & 通俗的讲就是整个屏幕的排版布局显示，比如 又几个TextView &或者ScrollView等组件组成的一个界面 就是一个场景 &或者是一个全屏的React组件
& & & & & 相对于场景来说 组件就是场景的部分&
一般情况下 我们自定义的组件 并不是单纯的在一个场景中使用 很多时候我们需要服用这个组件 那么这个组件就要单独拿出来写成一个js文件&
创建一个名为 MyScene.js的文件 具体实现代码如下：
import React, { Component } from 'react';
import { View, Text } from 'react-native';
//组件前面必须声明 export default关键字 说明该组件是可以导出的 或者说 是允许其他组件或者场景导入的export default class MyScene extends Component {
static get defaultProps() {
title: 'MyScene'
render() {
&Text&Hi! My name is {this.props.title}.&/Text&
注意：创建的文件必须是js文件 &名字必须按照命名规范进行命名 （首字母必须大写 &不大写也可以 但是会出现不可预期的问题）
关于组件的复用：
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
// ./MyScene表示的是当前目录下的MyScene.js文件，也就是我们刚刚创建的文件
// 注意即便当前文件和MyScene.js在同一个目录中，&./&两个符号也是不能省略的！
// 但是.js后缀是可以省略的
import MyScene from './MyScene';
class YoDawgApp extends Component {
render() {
&MyScene /&
AppRegistry.registerComponent('YoDawgApp', () =& YoDawgApp);
import React, { Component } from 'react';
import { AppRegistry } from 'react-native';
// ./MyScene表示的是当前目录下的MyScene.js文件，也就是我们刚刚创建的文件
// 注意即便当前文件和MyScene.js在同一个目录中，&./&两个符号也是不能省略的！
// 但是.js后缀是可以省略的
import MyScene from './MyScene';
class YoDawgApp extends Component {
render() {
&MyScene /&
AppRegistry.registerComponent('YoDawgApp', () =& YoDawgApp);
注意：./表示在当前目录下进行查找 &import MyScene from './MyScene'; & 红字的部分 是自定义在当前js文件中&MyScene组件的名称 &可以与MyScene组件名字不一样 但是首字母一定要大写 &不大写的话将报错
使用navigator完成界面的跳转个数据的传递&
SimpleComponent.js定义简单的页面跳转 （大概思路：初始化路由 默认第一个页面时出示页面 定义跳转动画 渲染场景 此时 使用当前显示的组件进行渲染） 具体实现方式如下 ：
* Created by zhangyanjiao on 16/9/18.
import React from 'react';
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SampleComponent extends React.Component {
render() {
//组件名字
let defaultName = 'FirstPageComponent';
//组件的Class用来实例化成&Component/&标签的
let defaultComponent = FirstPageC
&Navigator
//这个指定了默认的页面，也就是启动app之后会看到界面的第一屏。 需要填写两个参数: name 跟 component。
//（注意这里填什么参数纯粹是自定义的，因为这个参数也是你自己发自己收，自己在renderScene方法中处理。
// 我们这里示例用了两个参数，但其实真正使用的参数只有component）
initialRoute={{ name: defaultName, component: defaultComponent }}
//页面跳转动画
可以返回多个动画
使用||返回
configureScene={(route) =& {
return Navigator.SceneConfigs.VerticalUpSwipeJump;
//渲染场景
route中就是我们自定义的 name 和 component
//navigator 就是Navigator对象
renderScene={(route, navigator) =& {
let Component = route.component;
//Component 是route的component参数值
在路由中初始化的component的参数值是 defaultComponent
//所以 Component组件就是FirstPageComponent组件
return &Component {...route.params} navigator={navigator} /&
在renderScene方法的参数中 &route（路由）就是存储我们初始化路由自定义的参数 可以有多个参数 &因此在传递的时候 使用......route.paramas navigator就是我们在simpleComponent文件中定义的全局的Navigator的对象 &
创建 FirstPageComponent.js （大概思路：渲染当前新页面的时候 先执行 render方法 &显示可点击区域 &再将点击事件绑定到该区域
再点击实现时 需要通过props进行获取 navigator对象 （再之前的文章中我已经介绍过 props属性是父级组件向子组件传递数据的一种方式）所以可以通过props获取SimpleComponent传递过来的数据 ） 获取之后需要进行判断 是否存在 &然后修改其中的组件名称 以及组件的Class 并将新的场景推入导航栈（渡到新的场景，你需要了解push和pop方法。这两个方法由navigator对象提供）中
然后重新渲染场景 此时 &就是渲染的SecondPagerComponent中设置的场景
* Created by zhangyanjiao on 16/9/18.
import React from 'react';
Navigator,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import SecondPageComponent from './SecondPageComponent';
export default class FirstPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
_pressButton() {
//获取SampleComponent中创建的Navigator对象
const { navigator } = this.props;
//为什么这里可以取得 props.navigator?请看上文:
//&Component {...route.params} navigator={navigator} /&
//这里传递了navigator作为props
//这里对navigator进行了判断
如果navigator(导航器)对象存在的情况下 在进行操作
if (navigator) {
navigator.push({
name: 'SecondPageComponent',
component: SecondPageComponent,
//创建点击区域 当点击的时候 进行 页面的跳转 也就是对navigator的参数进行设置
使其跳转到 第二个界面
render() {
&TouchableOpacity onPress={this._pressButton.bind(this)}
style={{flexDirection:'row' ,alignItems: 'center'}}&
&Text style={styles.red}&点我跳转&/Text&
&/TouchableOpacity&
const styles=StyleSheet.create({
fontSize:40,
fontWeight:'bold',
color:'red'
SecondPageComponent.js 这个和第一个场景很相似 就不进行过多的介绍了 &需要注意的是 &跳回第一个场景 并不需要 再次入栈（或者说是压栈 只需要让第二个场景出栈即可 ）
* Created by zhangyanjiao on 16/9/18.
import React from 'react';
Navigator,
TouchableOpacity,
StyleSheet,
} from 'react-native';
import FirstPageComponent from './FirstPageComponent';
export default class SecondPageComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
_pressButton() {
const { navigator } = this.props;
if(navigator) {
//很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:FirstPageComponent了
navigator.pop();
render() {
&TouchableOpacity onPress={this._pressButton.bind(this)}
style={{alignItems:'center'}}
&Text style={styles.blue}&点我跳回去&/Text&
&/TouchableOpacity&
const styles=StyleSheet.create({
fontSize:40,
fontWeight:'bold',
color:'blue'
更多练习请看&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：30058次
排名：千里之外
原创：45篇
转载：17篇
评论：20条
(1)(6)(3)(16)(32)(4)ReactNative调试心得
在做React Native开发时，少不了的需要对React Native程序进行调试。调试程序是每一位开发者的基本功，高效的调试不仅能提高开发效率，也能降低Bug率。本文将向大家分享React Native程序调试的一些技巧和心得。
Developer Menu
Developer Menu是React Native给开发者定制的一个开发者菜单，来帮助开发者调试React Native应用。
提示：生产环境release (production) 下Developer Menu是不可用的。
如何开启Developer Menu
在模拟器上开启Developer Menu
可以通过Command? + M快捷键来快速打开Developer Menu。也可以通过模拟器上的菜单键来打开。
心得：高版本的模拟器通常没有菜单键的，不过Nexus S上是有菜单键的，如果想使用菜单键，可以创建一个Nexus S的模拟器。
iOS模拟器：
可以通过Command? + D快捷键来快速打开Developer Menu。
在真机上开启Developer Menu：
在真机上你可以通过摇动手机来开启Developer Menu。
vcGVyIE1lbnU=" src="/uploadfile/Collfiles/2.jpg" />
Reloading Script
在只是修改了js代码的情况下，如果要预览修改结果，你不需要重新编译你的应用。在这种情况下，你只需要告诉React Native重新加载js即可。
提示：如果你修改了native 代码或修改了Images.xcassets、res/drawable中的文件，重新加载js是不行的，这时你需要重新编译你的项目了。
Reload js即将你项目中js代码部分重新生成bundle，然后传输给模拟器或手机。
在Developer Menu中有Reload选项，单击Reload让React Native重新加载js。对于iOS模拟器你也可以通过Command? + R快捷键来加载js，对于Android模拟器可以通过双击r键来加载js。
提示：如果Command? + R无法使你的iOS模拟器加载js，则可以通过选中Hardware menu中Keyboard选项下的 &Connect Hardware Keyboard& 。
小技巧：Automatic reloading
Enable Live Reload
React Native旨在为开发者带来一个更好的开发体验。如果你觉得上文的加载js代码方式太low了或者不够方便，那么有没有一种更简便加载js代码的方式呢？
答案是肯定的。
在 Developer Menu中你会看到&Enable Live Reload& 选项，该选项提供了React Native动态加载的功能。当你的js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上，是不是觉得很方便。
Hot Reloading
另外，Developer Menu中还有一项需要特别介绍的，就是&Hot Reloading&热加载，如果说Enable Live Reload解放了你的双手的话，那么Hot Reloading不但解放了你的双手而且还解放了你的时间。 当你每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包，然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面，Enable Live Reload则会在保持你的程序状态的情况下，就可以将最新的代码部署到设备上，听起来是不是很疯狂呢。
提示：当你做布局的时候启动Enable Live Reload功能你就可以实时的预览布局效果了，这可以和用AndroidStudio或AutoLayout做布局的实时预览相媲美。
Errors and Warnings
在development模式下，js部分的Errors 和 Warnings会直接打印在手机或模拟器屏幕上，以红屏和黄屏展示。
React Native程序运行时出现的Errors会被直接显示在屏幕上，以红色的背景显示，并会打印出错误信息。 你也可以通过console.error()来手动触发Errors。
React Native程序运行时出现的Warnings也会被直接显示在屏幕上，以黄色的背景显示，并会打印出警告信息。 你也可以通过console.warn()来手动触发Warnings。 你也可以通过console.disableYellowBox = true来手动禁用Warnings的显示，或者通过console.ignoredYellowBox = ['Warning: ...'];来忽略相应的Warning。
提示：在生产环境release (production)下Errors和Warnings功能是不可用的。
Chrome Developer Tools
Chrome 开发工具
谷歌 Chrome 开发工具，是基于谷歌内含的一套网页制作和调试工具。开发者工具允许网页开发者深入浏览器和网页应用程序的内部。该工具可以有效地追踪布局问题，设置
断点并可深入理解代码的最优化策略。 Chrome 开发工具一共提供了8大组工具：
Element 面板： 用于查看和编辑当前页面中的 HTML 和
元素。Network 面板：用于查看 HTTP 请求的详细信息，如请求头、响应头及返回内容等。Source 面板：用于查看和调试当前页面所加载的脚本的源文件。TimeLine 面板： 用于查看脚本的执行时间、页面元素渲染时间等信息。Profiles 面板：用于查看 CPU 执行时间与内存占用等信息。Resource 面板：用于查看当前页面所请求的资源文件，如 HTML，CSS 样式文件等。Audits 面板：用于优化前端页面，加速网页加载速度等。Console 面板：用于显示脚本中所输出的调试信息，或运行测试脚本等。
提示：对于调试React Native应用来说，Sources和Console是使用频率很高的两个工具。
你可以像调试JavaScript代码一样来调试你的React Native程序。
如何通过 Chrome调试React Native程序
你可以通过以下步骤来调试你的React Native程序：
第一步：启动远程调试
在Developer Menu下单击&Debug JS Remotely& 启动JS远程调试功能。此时Chrome会被打开，同时会创建一个&http://localhost:8081/debugger-ui.& Tab页。
第二步：打开Chrome开发者工具
在该&http://localhost:8081/debugger-ui.&Tab页下打开开发者工具。打开Chrome菜单-&选择更多工具-&选择开发者工具。你也可以通过快捷键(Command? + Option? + I on Mac, Ctrl + Shift + I on Windows)打开开发者工具。
打开Chrome开发着工具之后你会看到如下界面：
打开&RCTWebSocketExecutor.m &文件，将&localhost&改为你的电脑的ip，然后在Developer Menu下单击&Debug JS Remotely& 启动JS远程调试功能。
在Android上
在Android5.0以上设备上，将手机通过usb连接到你的电脑，然后通过adb命令行工具运行如下命令来设置端口转发。
adb reverse tcp:8081 tcp:8081
你也可以通过在&Developer Menu&下的&Dev Settings&中设置你的电脑ip来进行调试。
心得：在使用真机调试时，你需要确保你的手机和电脑处在同一个网段内，即它们实在同一个下。
巧用Sources面板
Sources 面板提供了调试 JavaScript 代码的功能。它提供了图形化的V8 调试器。
Sources 面板可以让你看到你所要检查的页面的所有脚本代码，并在面板选择栏下方提供了一组标准控件，提供了暂停，恢复，步进等功能。在窗口的最下方的按钮可以在遇到异常(exception)时强制暂停。显示在单独的标签页，通过点击 打开文件导航面板，导航栏中会显示所有已打开的脚本文件。
心得：Chrome开发着工具中的Sources面板几乎是我最常用的功能面板。通常只要是开发遇到了js报错或者其他代码问题，在审视一遍自己的代码而一无所获之后，我首先就会打开Sources进行js断点调试。
执行控工具
从上图可以看到&执行控工具&按钮在侧板顶部，让你可以按步执行代码，当你进行调试的时候这几个按钮非常有用：
继续(Continue): 继续执行代码直到遇到下一个断点。单步执行(Step over): 步进代码以查看每一行代码对变量作出的操作，当代码调用另一个函数时不会进入这个函数，使你可以专注于当前的函数。跳入(Step into): 与 Step over 类似，但是当代码调用函数时，调试器会进去这个函数并跳转到函数的第一行。跳出(Step out): 当你进入一个函数后，你可以点击 Step out 执行函数余下的代码并跳出该函数。断点切换(Toggle breakpoints): 控制断点的开启和关闭，同时保持断点完好。
查看js文件
如果你想在开发者工具上预览你的js文件，可以在打开Sources tab下的debuggerWorker.js选项卡，该选项卡下会显示当前调试项目的所有js文件。
断点其实很简单
断点(Breakpoint) 是在脚本中设置好的暂停处。在DevTools中使用断点可以调试JavaScript代码，DOM更新和 network calls。
心得：你可以像使用Xcode/AndroidStudio调试Native应用一样，来使用Chrome开发者工具通过断点对程序进行调试。
添加和移除断点
在 Sources 面板的文件导航面板中打开一个JavaScript文件来调试，点击边栏(line gutter) 为当前行设置一个断点，已经设置的断点处会有一个蓝色的标签，单击蓝色标签，断点即被移除。
心得：右键点击蓝色标签会打开一个菜单，菜单包含以下选项：执行到此(Continue to Here)，黑盒脚本(Blackbox scripts)，移除断点(Remove Breakpoint)， 编辑断点(Edit Breakpoint)，和 禁用断点(Disable Breakpoint)。在这里你可以对断点进行更高级的定制化的操作。
上文讲到右键点击蓝色标签会打开一个菜单，下面就介绍一下该菜单下的高级操作。
执行到此(Continue to Here)：
如果你想让程序立即跳到某一行时，这个功能会帮到你。如果在该行之前还有别的断点，程序会依次经过前面的断点。另外需要提出的是这个功能在任意一行代码的边栏(gutter line)前单击右键都会看到。
黑盒脚本(Blackbox scripts)：
黑盒脚本会从你的调用堆栈中隐藏第三方代码。
编辑断点(Edit Breakpoint)：
通过该功能你可以创建一个条件断点，你也可以在边栏(gutter line) 右键并选择添加条件断点(Add Conditional Breakpoint) 。在输入框中，输入一个可解析为真或假的表达式。仅当条件为真时，执行会在此暂停。
心得：如果你想让程序在某处从来都不要暂停，可以编辑一个条件永远为false的条件断点。另外，你也可以在该行代码的边栏(gutter line)前单击右键选择&Never pause here&即可，你会发现&Never pause here&其实就是在该行代码上设了一个永远为false的条件断点。
管理你的断点
你可以通过Chrome开发者工具的右边面板来统一管理你的断点。
心得：你可以通过断点前的复选框来启用和禁用断点，也可以单击右键来进行更多的操作(如：移除断点，移除所有断点，启用禁用断点等)。
有一种断点叫全局断点
全局断点的作用是，当程序出现异常时，会在异常的地方暂停，这对快速定位异的常位置很方便。
做iOS开发的同学都知道在Xcode中可以设置全局断点，其实在Chrome 开发者工具中也同样有与之对应的功能，叫&Pause On Caught Exceptions&。如果勾选上此功能，则即使所发生运行时异常的代码在 try/catch 范围内，Chrome 开发者工具也能够在错误代码处停住。
不要忽略控制台
DevTools 控制台(Console) 可以让你在目前已暂停的状态下进行试验。按 Esc 键打开/关闭控制台。
心得：你可以在控制台(Console)上打印变量，执行脚本等操作。在开发调试中非常有用。React作为时下最热的前端框架，各位有什么经验分享下吗？ - 知乎1291被浏览38181分享邀请回答var Aquarium = ({species}) =& (
{getFish(species)}
有没有发现被传统的 createClass 方法精简了很多？当然这样写组件也有很多局限，比如不能声明各种生命周期方法等等，但是在常见的前端业务场景中，纯 render 的组件不在少数。在这样的语法推出后，我们就能把这些组件更方便的抽出来复用了。此外，拥抱 ES 6 还有很多的好处，比如在加载依赖的时候不用先 var xxx = require('xxx'); 再 var yyy = xxx. 而是可以直接 import {yyy} from 'xxx'; 简洁明了。4. 生态环境仍然在成长中，坑不少其中首先要口诛笔伐一下的就是 react-router，我们从 v0.10 开始用，到现在 v1.0。你知道为了升级这玩意儿我们改了多少次业务代码么？每次升级 API 都要变，无力吐槽。当年好不容易搞懂了 v0.11，在博客里写了篇技术文章分享，结果后面的日子就是各种被催更……一个月前抽空就 0.13 版又重写了一遍教程，这不 1.0 版又出了，API 基本全都不一样了！！不一样了！！一样了！！样了！当然除了坑也有不少高质量的生态环境产品，比如蚂蚁的 ant design。5. Server 端渲染很美，至今没看见哪个规模级的产品用到可能是我孤陋寡闻吧，欢迎评论中跟进。自己摸索着写过一个最简单的 server 端渲染，但是这套逻辑如果套到我们现在的业务逻辑中，几乎可以直接枪毙。为了实现 server 端渲染需要做出的 trade off 太多。6. React 很简单，也很难简单是因为 React 的 API 真的很少，官网的各种文档花一个下午也能看个七七八八（此时此刻再看看 Angular……）。但是当你以为你真的搞懂 React 的时候，看看这篇文章开头提的问题，有多少人能不假思索的答对呢？（顺便安利一下，我们团队的知乎专栏，目前处于死磕 React 的状态）当你真正在业务项目中使用 React 的时候，你会发现它的生命周期比你想象的复杂；它的 API 背后的逻辑比你以为的麻烦。当然，首先你要踩进这个坑。7. 对于楼上某位仁兄表示这本书太难的回答，作为译者之一表示对不起你。作为补偿，所有购买本书的同学均可凭拍照私信我咨询 React 相关的问题。最后再次安利一下我们团队的专栏： 8. 梦中惊醒补充一点，截止目前为止，Babel 6 是个大坑，业务中使用的时候一定要注意其与 Babel 5 的巨大区别。（关于补充的这一点，再额外的阐述一下，应该理解成 Babel 5 为了让大家愉快的用上 ES 6 做了一些非标准的转换，这些转换在 Babel 6 中都去掉了。所以你在 Babel 5 下面编译正常的代码在 Babel 6 编译时可能就会出错。这个问题不能确切的算作 Babel 的坑，但是会影响你的开发进度）19725 条评论分享收藏感谢收起5621 条评论分享收藏感谢收起更多1 个回答被折叠（）React Native实战（一）：配置和起步
发表于 15:40|
作者廖祜秋
摘要：MDCC 2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
10月14日-16日，由CSDN和创新工场联合主办的将在北京新云南皇冠假日酒店隆重召开，现在抢注大会门票，即享多重好礼！
Facebook开源React Native也势要统一移动端编程语言，而其提前发布React Native for Android更是引得国内外开发者一众热捧。MDCC
2015平台与技术Android专场与会讲师——阿里巴巴工程师 廖祜秋以《React Native for Android》为主题，将在大会上深度分享React
Native 下的 Android 开发，先行撰文对React Native进行实战，本文为第一篇。
图：阿里巴巴工程师 廖祜秋
以下为正文：
2015 年 9 月 15 号，React Native for Android 发布。至此，React 基本完成了对多端的支持。基于 React
/ React Native 可以：
HTML5、Android、iOS 多端代码复用；
实时热部署。
在接下来的时间，我会通过一系列文章来介绍 React Native。本文介绍环境配置以及如何建立一个简单的项目。（注：本篇文章 iOS 和
Android 开发都适用。）
目前使用 React Native 开发只能在 Mac 系统 上进行。写 iOS 的同学，应该都是 Mac （除了听说网易有些部门写 iOS
给黑苹果之外，哈哈哈哈）。 开发 Android 的同学, 如果公司配发的不是 Mac 的话，建议自己入手一个，能显著提高生产力，就当投资自己吧。我大阿里对
Android 开发也是不给 Mac 的（不知道公司什么思路，现在倒是可以申请 Mac air了，air的性能……），所以我也是自己买的。
需要安装的有：
Homebrew 是 Mac 中的一个包管理器。没有安装的话，点击
安装，我的版本如下：
mac-2:~ srain$ brew -v
Homebrew 0.9.5 (git revision ac9a7; last commit )
版本过低将会导致无法安装后续几个组件。可用 brew update 升级。
Node.js 需要 4.0 及其以上版本。安装好之后，npm 也有了。
安装 Node.js
nvm 是 Node.js 的版本管理器，可以轻松安装各个版本的 Node.js 版本。
安装 nvm 可以通过 Homebrew 安装：
brew install nvm
的方法安装。
然后安装 Node.js：
nvm install node && nvm alias default node
也可以直接下载安装 Node.js：
安装好之后，如下：
mac-2:react-native srain$ node -v
mac-2:react-native srain$ npm -v
这两个包分别是监控文件变化和类型检查的。安装如下：
brew install watchman
brew install flow
安装 React-Native
安装即可：
npm install -g react-native-cli
App开发环境的设置
XCode 6.3 及其以上即可。
这个比较麻烦。
设置环境变量：ANDROID_HOME
export ANDROID_HOME=/usr/local/opt/android-sdk
SDK Manager 安装以下包：
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
初始化一个项目
文档提到：
react-native init AwesomeProject
初始化一个项目，其中 AwesomeProject 是项目名字，这个随意。等待一段时间之后（具体视网络情况而定），项目初始化完成。
进入到项目目录：
cd AwesomeProject
mac-2:AwesomeProject srain$ ls -l
drwxr-xr-x
476 Sep 21 09:52 android
-rw-r--r--
1023 Sep 21 11:47 index.android.js
-rw-r--r--
1065 Sep 20 11:58 index.ios.js
drwxr-xr-x
204 Sep 20 11:58 ios
drwxr-xr-x
170 Sep 21 10:31 node_modules
-rw-r--r--
209 Sep 20 11:58 package.json
其中 android 和 ios 中分别为两个平台的项目文件。index.android.js 和 index.ios.js 为两个页面对应的
不管是 iOS 还是 Android，在开发调试阶段，都需要在 Mac 上启动一个 HTTP 服务，称为“Debug Server”，默认运行在
8081 端口，APP 通 Debug Server 加载 js。
iOS 和 Android 的模拟器，连接 Mac 本机的服务都很方便。但是通过 USB 或者 WiFi 连接调试，就稍微麻烦一些了。
还是非常简单，XCode 打开项目，点击运行就好。修改 index.ios.js, 在模拟器中 ? + R 重新载入 js 即可看到相应的变化。
iOS 真机调试也简单，修改HTTP地址即可。
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
按照官方文档，需要一个模拟器（Genymotion模拟器也可以）。但是不像 iOS，Android 开发平时更多是直接用真机进行开发和调试，如何运行部署到真机，下面会提到。
运行命令：
react-native run-android
然后就会部署到模拟器，修改 index.android.js ，调出模拟器菜单键，选择重新载入 js 即可看到变化。
Android 真机调试
示例 App 直接部署到真机，红色界面报错，无法连接到 Debug Server。
如果是 5.0 或者以上机型，可通过 adb 反向代理端口，将 Mac 端口反向代理到测试机上。
adb reverse tcp:8081 tcp:8081
如果 5.0 以下机器，应用安装到测试机上之后，摇动设备，在弹出菜单中选择 Dev Setting & Debug Server host
for device，然后填入 Mac 的 IP 地址（ifconfig 命令可查看本机 IP）
关于修改 DevHelper 来进行和 iOS 一样的开发调试，后续关于热部署时，我会介绍到。
在 Android Studio 中调试开发
我们可能希望在 Android Studio 打开项目，然后编译部署到真机。
这个时候，在命令行启动 Debug Server 即可：
react-native start
结论和后续
本篇文章，iOS 和 Android 都适用。至此，环境配置和示例项目运行应该都好了。后续我会继续发几篇文章介绍：
重点介绍 Android 相关的开发：包括组件，源码分析等；
动态热部署；
多端代码复用。
官方文档：
时间仓促，水平有限，如有谬误，还请纠正，原始文档在。
将于10月14日-16日在北京新云南皇冠假日酒店召开。大会特设九大技术专场：平台与技术（iOS）、平台与技术（Android）、平台与技术（跨平台）、产品与设计、游戏开发、企业移动化、虚拟现实专场、硬件开发与技术、嵌入式开发。大会将聚集国内最具实力的产品技术团队，与开发者一道进行最前沿的探讨与交流。&
第一时间掌握最新移动开发相关信息和技术，请关注mobilehub公众微信号（ID: mobilehub)。
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章}