每天三分钟，看一篇小文章，学一个小技能
别人有的是他的，你有了，思路就是你的。
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'
<EButton style={{ padding: 16 }} mode="full" type="warn" onPress={this._onPress} > hello world </EButton>
完成整个练习后，小结一下，当我们遇到需要自己包装一个组件后，先用思维导图理清楚组件的细枝末节的功能树，然后创建一个组件，把功能树里的功能，一个一个填充进去，对外一个可用组件就出来了。
放上代码地址：Button
预览图
