上一节讲到了 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. atitit.安全的签名摘要 算法attilax总结

    atitit.安全的签名 算法attilax总结 1. MD5 (不推荐)结果是128位二进制,只有转为16进制字符串是32位 1 2. 使用sha1算法加密后的密串长度有40位,相对更安全一些.Sh ...

  2. cxf动态调用webservice设置超时,测试线程安全

    Java代码 import java.util.Random; import java.util.concurrent.ArrayBlockingQueue; import java.util.con ...

  3. 每日英语:Air Pollution From Coal Use Cuts Lifespans in China, Study Shows

    Air pollution from coal combustion likely cut life expectancy in parts of China by more than five ye ...

  4. Secure REST API with oauth2 (翻译)

    http://blog.csdn.net/haiyan_qi/article/details/52384734 ******************************************** ...

  5. mysql学习笔记1---mysql ERROR 1045 (28000): 错误解决办法

    mysql ERROR 1045 (28000): 错误解决办法 在启动mysql服务后,登陆mysql的窗口的时候,执行mysql命令,结果报错,没法登陆.   (在安装mysql和配置的时候,我是 ...

  6. java ssm框架入门(三)正式项目的web.xml配置

    一个正规的上线的web.xml的配置. <?xml version="1.0" encoding="UTF-8"?> <web-app id= ...

  7. [boostrap]debian下为arm创建debian和emdebian文件系统

    转自:http://www.cnblogs.com/qiaoqiao2003/p/3738552.html Debian系统本身包含对arm的支持,其包含的软件包最多,但是最终的文件系统要大一些. e ...

  8. 使用submit异步提交,阻止表单默认提交

    <form id="addForm" onSubmit="return false;"> <input type="submit&q ...

  9. 数据库 proc编程六

    #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include <stri ...

  10. sql one

    查询的话 子查询什么的都很正常 添加的话 尽量把东西都添加在一个表单里 这是源头 有个这个方便的源头 查询和删除都会方便很多 组建一个网站,不可避免的要进行调试,有些功能需要添加或者删除,对于后台来讲 ...