适用于 React Native App 的一个倒计时组件，基于 render-props 方式实现，使用者可完全把重心放在 UI 定制上面，无须关注倒计时逻辑实现。
由于组件进行了重构，之前版本的大部分 props 有重大变更，罗列如下：
overTitle：倒计时结束文本（移除）titleStyle：文本样式（移除）countingStyle：倒计时中的容器样式（移除）countingTitleTemplate：文本模板（移除）countingTitleStyle：倒计时中的文本样式（移除）timeFontStyle：针对时间文本的样式（移除）shouldStartCountdown：是否允许开始倒计时回调（移除）onCountdownOver：重命名为onDidFinishCountdown，触发机制保持与之前一致（更新）onNetworkFailed：网络出错情况下，点击触发的回调（保留）style：容器样式（保留）time：倒计时总时长（单位秒，保留）activeOpacity：点击时的透明度（新增）children：添加对children的一个类型检测，必须为function（新增）onPress：点击组件的回调（新增，新版本组件将控制权交给了开发人员，通过实例方法按需开启，或是停止倒计时）
以下实例方法将继续保留：
startCountdown：立即开始倒计时，如果网络错误，将触发onNetworkFailed回调，可按需进行弹框提示处理stopCountdown：立即停止倒计时，将触发onDidFinishCountdown回调，按需添加后续处理
| React Native 版本 | 对应支持的组件版本 |
|---|---|
| 0.48.0+ | v0.3.0+ (NetInfo change -> connectionChange for eventListener) |
| < 0.48.0 | v0.2.1 |
通过 npm 安装:
// >= 0.48.0
npm install rn-countdown --save
// < 0.48.0
npm install rn-countdown@0.2.1 --save
或者基于 yarn 安装:
// >= 0.48.0
yarn add rn-countdown
// < 0.48.0
yarn add rn-countdown@0.2.1
import React, { Component } from 'react'
import {
StyleSheet,
Text,
View,
Dimensions,
TextInput,
Button
} from 'react-native'
import Countdown, { CountdownStatus } from 'rn-countdown'
export default class App extends Component {
state = {
hasText: false
};
phoneNumber = ''
handleClickCountdown = () => {
if (!this.phoneNumber) {
alert('电话号码不能为空!')
return
}
this.countdown && this.countdown.startCountdown()
};
handleNetworkFailed = () => alert('network failed')
handleStopCountdown = () => this.countdown && this.countdown.stopCountdown()
handleChangeText = text => {
this.phoneNumber = text;
this.setState({ hasText: !!this.phoneNumber })
}
handleCountdownOver = () => alert('over')
render() {
const { hasText } = this.state
return (
<View style={styles.container}>
<View style={styles.phoneCell}>
<View style={styles.phoneInfo}>
<Text>账号:</Text>
<TextInput
style={styles.input}
placeholder="请输入手机号码"
underlineColorAndroid="transparent"
onChangeText={this.handleChangeText}
/>
</View>
<Countdown
ref={r => this.countdown = r}
time={10}
onPress={this.handleClickCountdown}
onNetworkFailed={this.handleNetworkFailed}
onDidFinishCountdown={this.handleCountdownOver}
>
{({ status, time }) => {
let title, containerStyle, titleStyle
switch (status) {
case CountdownStatus.Idle:
title = '发送验证码'
containerStyle = [
styles.countdown,
hasText && { backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0 }
]
titleStyle = [
styles.countdownTitle,
hasText && { color: '#fff' }
]
break
case CountdownStatus.Counting:
title = `发送中(${time})`
containerStyle = styles.countdown
titleStyle = styles.countdownTitle
break
case CountdownStatus.Over:
title = '重新发送'
containerStyle = [
styles.countdown,
hasText && { backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0 }
]
titleStyle = [
styles.countdownTitle,
hasText && { color: '#fff' }
]
break
}
return (
<View style={containerStyle}>
<Text style={titleStyle}>{title}</Text>
</View>
)
}}
</Countdown>
</View>
<Button title="停止" onPress={this.handleStopCountdown}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
phoneCell: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
paddingHorizontal: 15,
height: 40,
borderBottomWidth: StyleSheet.hairlineWidth,
borderColor: '#ebebeb',
width: Dimensions.get('window').width,
backgroundColor: '#fff'
},
phoneInfo: {
flexDirection: 'row',
alignItems: 'center',
},
input: {
height: 30,
width: Dimensions.get('window').width * 0.4,
marginLeft: 10,
padding: 0,
fontSize: 14
},
countdown: {
borderRadius: 15,
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#ebebeb',
height: 30,
width: 100,
justifyContent: 'center',
alignItems: 'center',
},
countdownTitle: {
color: '#ccc',
fontSize: 12
},
})| 名称 | 类型 | 是否可选 | 默认值 | 描述 |
|---|---|---|---|---|
| style | ViewPropTypes | 是 | 无 | 自定义容器样式，这里应该关注于容器相对于其父组件、兄弟组件的样式，比如：margin、padding 等，真正业务上的 UI 定制，可在 children 中进行定制 |
| time | number | 是 | 30s | 倒计时时长 |
| activeOpacity | number | 是 | 0.75 | 按钮交互时的透明度 |
| children | function | 否 | 无 | 一个返回 React 元素的函数，该函数接受一个参数，其格式为: ({ status: CountdownStatus, time: number }) => React.Element<any> status:- Idle: 默认状态- Counting: 正在倒计时- Over: 倒计时结束 |
| onPress | function | 是 | 无 | 点击组件时必会触发的回调 |
| onNetworkFailed | function | 是 | 无 | 网络出错情况下，点击组件的回调，按需添加弹窗处理 |
| onDidFinishCountdown | function | 是 | 无 | 倒计时结束回调 |
| 名称 | 描述 |
|---|---|
| startCountdown | 立即开始倒计时，网络出错情况下，将触发 onNetworkFailed 回调 |
| stopCountdown | 立即停止倒计时，将触发 onDidFinishCountdown 回调 |
以上方法皆可通过 ref 进行引用触发，比如：this.countdownRef && this.countdownRef.startCountdown()。
克隆之后，需要先开启 TypeScript 的编译监听：
// 根目录
$ npm install
$ npm start
然后进入到 example 目录，开启服务（当然也可以直接通过 Xcode 或是 Android Studio 运行）：
$ cd example
$ npm install
$ npm start