专栏首页樯橹代码react-native 开发笔记(一)

react-native 开发笔记(一)

react-native 开发笔记

开始使用react-native开发产品,讲讲今天遇到的坑

TabBarIos的使用

一般app的设计都是主页是一个tab页面,我们的app产品也是不例外的,所以我使用了这个iOS专用的组件(先搞定ios,再考虑兼容性)

遇到的问题

  1. 图标大小适配问题 因为设计给出来的设计稿的2X,所以切出来的图都是2倍的,这就导致图标很大,翻遍文档,只找到一个{{uri: base64Icon, scale: 2}}这样子的配置,但是本地图片,总不能先手动转换成base64字符串再用吧。找来找去,在Image组件里面看到,图片适配方案,如果把图片保存为xx@2x.png,是不是也可以在icon里面使用?结果是令人欣慰的。
  2. active颜色问题 这个不算问题了,算是优势。一般做web开发,如果不是图标字体的话,我们会为图片的选中和不选中准备两张图片做切换。在react-native里面不需要这么复杂,只需要准备一张图片,通过配置就可以解决了 unselectedTintColor="#929292" tintColor="#007aff" barTintColor="#f7f7f7"

我使用的react-native的版本是0.44,这个版本里面移除了Navigator这个组件,所以在非正式版本里面出现问题,需要优先查看是不是版本问题导致的。不过幸好的是,react-natie提示做的很好,原来它们把Navigator移到了react-native-deprecated-custom-components这个单独的包里,安装引用一下就好了

flexbox的使用

如果你把一个View设置flex:1,它默认会占满剩下的垂直空间。这可能会导致开发者很困惑,怎么高度和我想的不一致呢?那只要把剩余的View高度都设置准确,这些都会迎刃而解。 所以开发的时候最好尽量先把外面的框框尺寸优先设置,这样子的布局看起来比较合理之后,再开发其他的布局就不会有困惑

因为flexbox尺寸是按照1,2这种最终比例在计算的,我们可以根据实际设计稿像素,来设置flex的值,比如width: 150px我们就设置成flex: 150,刚好对应起来

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • react-native 开发笔记 (三)

    react native默认编译配置可以编译一部分es7语法的,async await是其中的一种。使用起来自然是很简单,和koa 1.x 基本一致,没有区别。

    frontoldman
  • 按钮样式的正确方式

    如果你正在建立一个网站或一个web应用,你可能会用到按钮,也许看起来像按钮的链接。不管怎样,让这些正常展示是很重要的。

    frontoldman
  • 10条提高网站可访问性的建议

    我们收集了10条提高网站可访问性的建议以保证网站你的网站对任何人都是友好的,包括残疾人。

    frontoldman
  • FPGA&ASIC基本开发流程

    这整个流程称为RTL2GDSII,利用GDSII来生产芯片的过程称作流片(Tapeout),以上是一个Fabless公司的简易设计流程,最后将GDSII送至Fo...

    NingHeChuan
  • 我30岁了。现在开始编程,会不会太晚?

    大数据文摘
  • 01我的跨界之路:有预谋的积累

    本文整理自一年前的文章,是关于我对职业的思考,及跨界的心路历程: —————————— 一年前,我以斜杆青年自称: 产品经理/大学老师/程序员/园林设计师/UI...

    mixlab
  • 图片压缩 原

    ps处理图片直接保存后,往往图片很大,png的格式一般比jpg的大,若保存方式为:存储为web所用格式,这种情况图片会小些,(若选png24格式勾选交错),处理...

    tianyawhl
  • python系列------输入输出

    用户2398817
  • 这份前端面试小册子dog cheng带来啦~

    没有错,就是我啦dog cheng,好久不见,从17年在博客园写下第一篇文章,转身间已然两年,从大二到现在的大四预备毕业生,我仍然在这条道路上前进。秋招早已经结...

    okaychen
  • Netty 源码解析 ——— 基于 NIO 网络传输模式的 OP_ACCEPT、OP_CONNECT、OP_READ、OP_WRITE 事件处理流程

    tomas家的小拨浪鼓

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动