rn-countdown

适用于 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 [email protected] --save 

或者基于 yarn 安装:

// >= 0.48.0
yarn add rn-countdown

// < 0.48.0
yarn add [email protected]

使用

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