封装的一个倒计时按钮

封装的一个倒计时按钮,仅仅使用TouchableOpacity和Text两个东西

为啥自己写一个? 感觉别人写的不好而已，而且功能不全.

有好的建议请给issue，有问题也可以提出。

使用npm或者手动

接口多

回调什么的都有，可以见源码的propTypes有介绍

其他的2个优点

1. 初始化该组件

不同的页面LCCountDownButton的属性id要设置不同，因为‘智能的判断读秒时间’需要id来识别

// changeWithCount 是返回一个字符串表示button的title // pressAction 按下按钮的事件，并不会触发倒计时 <LCCountDownButton frameStyle={{top:44 * 3 + 4,right:10,width:120,height:36,position:'absolute'}} beginText='获取验证码' endText='再次获取验证码' count={10} pressAction={()=>{this.countDownButton.startCountDown()}} changeWithCount={(count)=> count + 's后重新获取'} id='register' ref={(e)=>{this.countDownButton=e}} />

2.触发LCCountDownButton倒计时方法

要主动调用startCountDown这个方法，按钮才会读秒， 上面的pressAction={()=>{this.countDownButton.startCountDown()}是直接调用了读秒，而没有做任何其他的操作。

下面这个栗子是做网络等耗时处理。 pressAction={()=>{this. _countDownButtonPressed()}

// 这个方法就是上面pressAction触发 _countDownButtonPressed(){ // 1s 后触发倒计时 例如做网络请求后的再读秒 this.timer = setTimeout(this._triggerCount.bind(this),1000); } // 拿到按钮，开始倒计时 _triggerCount(){ let button = this.countDownButton; button.startCountDown(); }

综上所述，下面是一个完整的例子：

<LCCountDownButton frameStyle={{top:44 * 3 + 4,right:10,width:120,height:36,position:'absolute'}} beginText='获取验证码' endText='再次获取验证码' count={10} pressAction={_countDownButtonPressed} changeWithCount={(count)=> count + 's后重新获取'} id='register' ref={(e)=>{this.countDownButton=e}} /> _countDownButtonPressed(){ //触发倒计时 this.countDownButton.startCountDown(); //请求发送验证码 fetch('请求验证码') .then() .catch() } 样式的属性

关于按钮大小的设置：

<LCCountDownButton frameStyle={{top:44 * 3 + 4,right:10,width:120,height:36,position:'absolute'}} ... />

设置frame的width和height。

如果你宽度想自适应，那么不用设置width。