专栏首页彭湖湾的编程世界从React-Native坑中爬出,我记下了这些

从React-Native坑中爬出,我记下了这些

吐槽

如果React-Native是个人,我估计已经想要打死他了。。。

上一篇文章

前言

最近因为业务需要,做了一些关于React-Native方面的开发,对一些自己遇到的问题做了记录。总共 21 条要点记录,承接于上一篇文章

本文讲的很多问题,不一定是对的,但确实是自己觉得可以引起一定的注意。因为也是刚开始了解,很多都不确定是否是最佳实践,还请各位前辈多多指教。

正文

1.对于背景,可以使用<backgroundImage>组件

2.字符串不写在<Text>组件里面会报错的,比如写在View组件下面的话

3.Web中溢出时候有内部滚动条的div,在RN中则是对应使用ScrollView组件

4.Web中我们使用click处理点击事件,在RN中要用Touchable组件的onPress事件

5.对于导航,我们可以使用React-Navigation

其中导航我们有两种写法,一种是单纯写成React的props函数调用的风格,另外一种是写成Redux的风格,就是通过dispatch/action的风格,使用Redux风格,是因为少部分场景可能会用到全局导航状态共享的需求,对于多数简单的需求,我觉得写成React的风格就好了,因为简单易用

6.对于切换类tabs,我们也许可以试试使用react-native-scrollable-tab-view

但有一点非常遗憾:这个组件对下划线的支持程度仍然无法满足普遍的业务需求 —— 自定义长度的居中下划线的切换

一般情况下,设计师给我们的下划线不是占满满一个tab的,而是只占一个tab的一部分长度,比如60%,同时还要实现居中,这时这个开源的tab模块就让我感到头疼了。

我也想过,react-native-scrollable-tab-view中,有一个叫做tabBarUnderlineStyle可以定义下划线的样式,我们也许可以在这里实现长度为单tab60%的下划线居中的效果。设置长度百分比,配合marginLeft就可以了。

可是,这样的话,我们切换的时候,平滑过渡的动画效果怎么实现?模块没有提供可以切入的相关props啊,实在没有办法,我最终还是无奈得自己定义了一个。当然了,模块其实提供了另外一个方法,可以切入tab渲染,那就是renderTabBar这个props,但我仔细思考一番后,发现:这好像和我自己写一个工作量上没区别 emmmm。

如果大家有比较好的方案,还请不吝提供一下,谢谢。

7.borderRadius不能用百分比了,要用数值

8. flex放心用吧!不用再畏手畏脚了,因为这里是移动端

9.如果要获取某个组件在屏幕中的位置组,可以利用组件布局完毕时触发的onLayout方法,可以在这里获取组件的位置,但令人遗憾的是,这个方法是异步的,异步的特征可能会与你的需求冲突,如果每个组件的物理距离是确定的,而非灵活变化的话,是可以写死的 。

10.RN使用动画的时候,组件一定要使用专门的动画组件Animated.View, 不然没有动画效果,切记。

12.除了动画和最近新增的CSS特性外,我们原本在web中能用的CSS属性大部分还是能用的。当然实现肯定和我们理解的“CSS”不一样了,下面是部分列表

Flex 
Width 
htight 
margin 
Padding 
textAlign
Overflow 
fontWeight 
Position

13.动画类的”CSS"是全体不能用了,你就忘了它们吧

14.单纯依靠Image的width:100%或者width: Dimensions.get(‘window’).width,可能无法实现图片匹配全屏宽度,还需要设置resizeMode: ‘contain’

15. 接上14,除此你会发现,图片的宽度变小了,但是外层的image控件的高度可能还是没有变化,因为它是开始就定死的,不是动态变化的,不是”auto”的,所以还要另外结合图片比例和屏幕宽度,进行设置

16.组件设置为position: absolute后,它的index是默认比其他组件要大的,可能会遮盖其他组件,这点要注意

17. Text可以设置border-radius,但是它的圆角不会切割掉背景。(就是说,虽然会出现border,border也是圆的,但是border外部的)所以,关键的时候还是要用View组件去设置文字外部背景圆角

单纯用Text去切割圆角背景,是切不出来的,boder确实会有圆角,但是无法切割边框

18.似乎RN并不支持boxSizing属性,按照我们在Web中的理解规则:它默认指定的是类似border-box的行为,也就是width是包含border的

19.承接20,画圆的时候,borderRadius是width/height的一半,而不是width 减去 borderWidth的一半

20.外层视图的overflow: hidden可能对内层视图没有作用,还是会出现内层视图超出外层的情况

21.RN 带背景的Text自适应文字内容宽度的方法实现

在使用RN的文本的时候,遇到了一件比较无语的事情,就是我想写一个类似“文本标签”的样式,就是一段可变长度的文本,然后外面包裹一个长方形的背景,当然是有圆角的那种。然后呢,我发现,直接用<Text>标签包裹文本的话,Text标签的背景颜色是会占满全屏的,用View包裹也同样出现这种情况

那么,怎么实现这种“带背景的Text自适应文字内容宽度”呢

实现

方式一:双重Text法

<Text style={{backgroundColor: 'transparent'}}>  
  <Text style={{backgroundColor: 'red'}}>sss</Text> 
</Text>
// 备注:用这种Text法无法设置padding!border-radius,对于细节丰富的标签样式实现会有问题

方式二: flex-align法

<View style={{alignSelf: 'flex-start'}}>   
  <Text>aaaaaa</Text> 
</View>

就能实现类似上面的效果

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 90行代码,15个元素实现无限滚动

    无限下拉加载技术使用户在大量成块的内容面前一直滚动查看。这种方法是在你向下滚动的时候不断加载新内容。

    前端劝退师
  • Java NIO之理解I/O模型(二)

    上一篇文章讲解了I/O模型的一些基本概念,包括同步与异步,阻塞与非阻塞,同步IO与异步IO,阻塞IO与非阻塞IO。这次一起来了解一下现有的几种IO模型,以及高效...

    Jimoer
  • windows环境里React-Native运行失败的原因之一,缺少依赖

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • React的source code init时会自动检测Chrome dev tool的react extension装了没

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • windows环境里React-Native运行失败,找不到Nullable的原因分析

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    Jerry Wang
  • 前端的世界里没有“容易”二字

    这半年,你过得怎么样?新的热点技术学会了吗?写的代码还有bug吗?头发还好吗?还记得年初的 Flag 吗?

    桃翁
  • 【React】354- 一文吃透 React 事件机制原理

    主要分为4大块儿,主要是结合源码对 react事件机制的原理 进行分析,希望可以让你对 react事件机制有更清晰的认识和理解。

    pingan8787
  • JulyNovel-React

    目前,JulyNovel后端框架基本搭建、部署完毕,GraphQL提供的API接口也有着高可用性,数据库里也存了六七百兆爬来的小说数据,是时候开始写前端了。

    从今若
  • react-navigation导航器

    和h5用a标签来跳转不太一样的是,rn必须依赖导航器跳转。导航器也可以看成是一个普通的React组件,你可以通过导航器来定义你的APP中的导航结构。导航还可以渲...

    一粒小麦
  • 2020年及未来的软件编程趋势预测

    2020年马上就要到了,这听起来很疯狂。似乎2020年就像是科幻小说里的故事那么遥远,但我们在这里 — 即将敲开它的大门。

    中国DevOps社区

扫码关注云+社区

领取腾讯云代金券