上一节讲到了 react-native的开发环境的配置,,这一节我门具体讲讲怎么看样式,怎么调试

看样式的话 有一个 神奇 react-native-developer tools(个人推荐,可选择性的选择用还是不用)

本包子 喜欢用真机调试,,,我一般拿android机器调试,,因为react-native在样式方面 是IOS的亲妈,是android的后妈。没毛病~

1.调试的话,如果是simulator模拟器的话,一般是command + D 弹出菜单选项,里面有一个 inscpect 这个是检查样式的。

如果是真机的话,你就使劲晃动你的手机。就会出来菜单选项了

2.有一个 remote debugger 这个将会自动打开 本地电脑的 谷歌浏览器。这个 不能看样式,但是能看到 发送请求的log日志 在console 控制台

你也可以去打断点。这一整个项目做下来,我发现没有什么bug是打断点解决不了的。。。。。

但是 有时候,我们想去看看我们发送的请求可咋整,因为network里面没有请求的日志,比较,react-native 不是H5.。。。。

这个时候我们可以用抓包工具,charlse 茶壶,这个响当当的抓包工具。这个 抓包工具的用法请自行百度

3.如果你在的电脑上更改了什么东西,想要 实时更新在你的手机上。。 你会发现 有一个hot reloading 没错 ,点击他。。然后,将你,当前电脑连接的ip 输入进去。

端口默认是8081.。前提是你npm start 的时候没有更改过端口号

然后 重新 在 reload 你的页面。。。一般一切顺利的话,,,当你 在 页面上 改什么东西的话,,就会在你的手机上显示 hot reloading

BUT 大部分的时候不会这么顺利。。。可能出现 报错。。。一般其实 我们就照着 报错上面的提醒做就行(这一点蛮好的,报错的解决方法和原因都给你写里面了)

一般我的报错 解决方法就是 adb reverse tcp:8081 tcp:8081  这个命令行。。然后 仔重新 运行一下环境就好了。记住啊,这个必须是 手机和 电脑在同一个局域网下/

总而言之,这个 调试方法就是 command +D 或者 摇一摇。。。。

下一节我们讲讲react-native中的样式写法和兼容问题

react-native 学习(二)的更多相关文章

  1. React Native学习(二)之View

    React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. ...

  2. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  3. React Native 学习-01

    React Native 学习 (学习版本 0.39) 一.环境配置 二.IDE选择 webstorm 1.webstorm配置 ①.首先是可以选择使用汉化包汉化.eu68 ②.安装插件和外部库. 由 ...

  4. react native 学习一(环境搭配和常见错误的解决)

    react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...

  5. React Native 学习资料

    React Native 学习资料 学习资料 网址 React Native中文网 https://reactnative.cn/

  6. React Native 学习(三)之 FlexBox 布局

    React Native 学习(三)之 FlexBox 布局

  7. React Native学习(二)—— 开始一个项目

    本文基于React Native 0.52 一.创建一个项目 1.初始化一个RN项目 react-native init RNDemo 2.连接一个设备或是打开模拟器 可以通过 adb devices ...

  8. iOS、swift、React Native学习常用的社区、论坛

    <!----iOS> <!----Swift>*IOS开发常用社区:http://code4app.com/ *IOS开发常用社区:http://www.cocoachina. ...

  9. react native学习资料

    一:基础学习: react-native中文文档(react native中文网,人工翻译,官网完全同步)http://react-native.cn/docs/getting-started.htm ...

  10. react native 学习资料整理

    入门教程 深入浅出 React Native:使用 JavaScript 构建原生应用 http://www.appcoda.com/react-native-introduction/  中文版 h ...

随机推荐

  1. 安卓开发学习2-官方例子Accelerometer

    1.使用WakeLock防止屏幕被锁住,如果用户自己锁住屏幕,下次再开的时候还会重置一下,防止被锁. 2.SimulationView接收传感器事件,并且绘制.它实现SensorEventListen ...

  2. 去重mongodb LIST

    using MongoDB; using DockSample.DB; using MongoDB.Driver; using System; using System.Collections.Gen ...

  3. js基本知识6

    1.2 复习 1. 节点 网页是有很多的节点组成的 . 元素节点 指的是 : 标签 li span 文本节点 属性节点 父子兄弟 父 parentNode nextSibling 孩子 childNo ...

  4. 在echarts中自定义提示框内容

    1.期望效果 以柱状图为例,在鼠标滑过每个数据标签时,为了更友好地显示数据内容,需要对显示的数据内容作格式化处理,添加自定义内容. 如下图,鼠标滑过每个数据项时, 第1张是默认提示框: 第2张是处理成 ...

  5. 改进cocos2dx中lua读ccb的方法

    cocos2dx自带的CCBProxy真弱,还好提供了一个CCBReaderLoader.lua,但是也不好用, 于是修改了一下CCBReaderLoader,下面直接贴代码了. function N ...

  6. kernel 4.4.12 移植 HUAWEI MU609 Mini PCIe Module

    首先请参考 http://www.cnblogs.com/chenfulin5/p/6951290.html 上一章刚讲了 kernel 3.2.0 移植 MU609 这一章记录新版kernel 的移 ...

  7. 示例 - C#脚本代码采集搜狐NBA球员, 球队和比赛实况

    最近 @甜瓜 (QQ:1069629945) 开发了一套NBA数据采集脚本, 我觉得很赞. 经他允许发布出来和大家分享一些经验: 球员球队: http://data.sports.sohu.com/n ...

  8. 归并排序的C++实现

    原创作品,转载请注明出处:点我 归并排序是建立在归并操作上的一种有效的排序算法,该算法是采用分治法(Divide and Conquer)的一个非常典型的应用.将已有序的子序列合并,得到完全有序的序列 ...

  9. java程序中输出console的日志到文本

    http://blog.sina.com.cn/s/blog_76a8411a01010u2h.html 首先:当我们引入data-integration\lib文件夹下的所有jar包后 运行java ...

  10. 关于Cocos2d-x中自定义的调用注意事项

    1.在实例类Student.h中定义一个自己的方法 public: int getSno(); 2.在实例类Student.cpp中实现这个方法 int Student::getSno(){ retu ...