写一个自己的RN Button组件 需要多少步?

每天三分钟,看一篇小文章,学一个小技能

React Native的自带组件,只能说基本够用,外观上差强人意,而第三方组件却非常丰富,需要用的时候,去github上搜索也基本能得到满意的答案。

然而,是程序就会有bug,相信不少人都遇到过,频繁解决三方组件问题的麻烦,这个时候,自己除了增强自己ko bug的能力,也可以稍微关注一下,自己捣鼓几个小组件的思路和能力了。

回到正题,这一次,是把平时工作中自定义的一些组件思路拿出来,和大家分享一下,项目里,简单定义一些组件的方法。

Button 按钮是算项目里用的比较频繁的组件,如果说一个项目里,什么组件要及时响应一个主题色调,那Button绝对排得上前位,这个时候,为了避免各种style满天飞的情况,自己构建一个归属项目的Button组件,就有那么一点必要了。

整理一下思路,Button组件最起码需要标配哪一些功能呢?

配图

从图上来看,也没有那么复杂,有了这几个功能,项目里一个Button组件就能满足基本业务需求了。围绕上面的思路,先定义一个组件类先把。

Button类

创建好Button组件后,接下来,就是要在render的函数里,实现我们想要的视图了。想要我们的Button需要可以点击,给他的文本外面包裹一个TouchableHighlight组件先。

可以点击的视图

有了TouchableHighlight包裹后,点击事件的问题,就被我们解决了,下面就应该处理一下按钮颜色的效果了。Button按钮组件一般都有文字颜色,边框颜色,背景颜色,加上点击后的效果,差不多需要处理最低四种颜色的状态。

先给我们的Button组件额外定义一个type属性,这样,调用这个组件的时候,就可以根据单一属性,直接控制整个组件的样式效果。

根据type初始化几种颜色

上面图中,我们在组件的构造函数里,根据type的属性,初始化文本,边框和背景等颜色配置,这样样式Style可以直接配置在Button组件的类里面,好处是整个组件的控制,都在组件这个js文件内,而不是分散到每一个业务模块里。

根据基础样式配置的Button样式

配置完样式和点击事件后,离完成Button组件的目标,就只剩下宽度和高度了。我们知道React Native里,可以直接使用flex,只要父组件配置了flex属性,只需要给组件增加flex: 1 这个属性,就可以实现铺满全屏的按钮效果了。

看到这里,基本上,一个Button组件的几个基本要素,都完成的差不多了。以后在项目里使用起来也很方便,import组件的js文件,就可以在任意地方直接放上我们自己的Button。

import EButton from './components/Button/EButton'

hello world

完成整个练习后,小结一下,当我们遇到需要自己包装一个组件后,先用思维导图理清楚组件的细枝末节的功能树,然后创建一个组件,把功能树里的功能,一个一个填充进去,对外一个可用组件就出来了。

放上代码地址:Button

预览图

你可能感兴趣的:(写一个自己的RN Button组件 需要多少步?)