写一个自己的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

预览图