https://github.com/ljunb/rn-countdown
⏰ 纯 JavaScript 实现的针对 React Native App 的倒计时组件。
https://github.com/ljunb/rn-countdown
countdown react-native rn verification
Last synced: about 2 months ago
JSON representation
⏰ 纯 JavaScript 实现的针对 React Native App 的倒计时组件。
- Host: GitHub
- URL: https://github.com/ljunb/rn-countdown
- Owner: ljunb
- License: mit
- Created: 2017-08-02T13:12:14.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-05-10T02:52:46.000Z (about 1 year ago)
- Last Synced: 2025-03-28T23:44:04.049Z (2 months ago)
- Topics: countdown, react-native, rn, verification
- Language: JavaScript
- Homepage:
- Size: 117 KB
- Stars: 18
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rn-countdown
[](https://www.npmjs.com/package/rn-countdown)
[](https://www.npmjs.com/package/rn-countdown)
[](https://www.npmjs.com/package/rn-countdown)
[](https://github.com/ljunb/rn-countdown/blob/master/LICENSE)
适用于 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]
```
## 使用
```javascript
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 (
账号:
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 (
{title}
)
}}
);
}
}
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`
`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
```