react-native 学习

Posted 爱吃土豆的包子君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react-native 学习相关的知识,希望对你有一定的参考价值。

上一节讲到了 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 学习的主要内容,如果未能解决你的问题,请参考以下文章

react-native版文字跑马灯

ubuntu 12.04 react-native 安装

在 react-native 中更改 TextInput 焦点的 underlineColorAndroid

react-native upoad imagepicker

react-native 图片选取与上传

在 react-native 和 firebase 3.1 中登录 Facebook