React Native之倒计时组件的实现(ios android)
React Native之倒计时组件的实现(ios android)
一,需求分析
1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束。
2,实现订单倒计时,并在倒计时结束时,订单关闭交易。
3,实现获取验证码倒计时。
二,技术实现
2.1,活动倒计时与订单倒计时的实现,源码如下:
componentDidMount() {
this.interval = setInterval(() => {
const date = this.getDateData(this.props.date);
if (date) {
this.setState(date);
} else {
this.stop();
this.props.onEnd();
}
}, 1000);
}
componentWillMount() {
const date = this.getDateData(this.props.date);
if (date) {
this.setState(date);
}
}
1,倒计时方法的实现:
getDateData(endDate) {
endDate = endDate.replace(/-/g, "/");
let diff = (Date.parse(new Date(endDate)) - Date.parse(new Date)) / 1000;
if (!!this.props.isOrederTime) {
diff = (Date.parse(new Date(endDate)) + (Number(this.props.isOrederTime) * 60 * 1000) - Date.parse(new Date)) / 1000;
} if (diff <= 0) {
return false;
}
const timeLeft = {
years: 0,
days: 0,
hours: 0,
min: 0,
sec: 0,
millisec: 0,
}; if (diff >= (365.25 * 86400)) {
timeLeft.years = Math.floor(diff / (365.25 * 86400));
diff -= timeLeft.years * 365.25 * 86400;
}
if (diff >= 86400) {
timeLeft.days = Math.floor(diff / 86400);
diff -= timeLeft.days * 86400;
}
if (diff >= 3600) {
timeLeft.hours = Math.floor(diff / 3600);
diff -= timeLeft.hours * 3600;
}
if (diff >= 60) {
timeLeft.min = Math.floor(diff / 60);
diff -= timeLeft.min * 60;
}
timeLeft.sec = diff;
return timeLeft;
}
2,退出界面,清除定时器
componentWillUnmount() {
this.stop();
} stop() {
clearInterval(this.interval);
}
3,数字不足时前面补0
// 数字前面补0
leadingZeros(num, length = null) {
let length_ = length;
let num_ = num;
if (length_ === null) {
length_ = 2;
}
num_ = String(num_);
while (num_.length < length_) {
num_ = '0' + num_;
}
return num_;
}
2.2,验证码倒计时与输入框
1,倒计时的实现(I18n 语言国际化),Api.sendVerifyCode调用后台发送验证码接口
//倒计时
daoJClick() {
//判断是否点击获取验证码
if(this.props.isClick){
this.props.isClick()
} if (this.props.mobile === '') {
Toast.show(I18n.t('Signin.Please_enter_phone_number'));
return;
}
if (!(/^1[345678]\d{9}$/.test(this.props.mobile))) {
Toast.show(I18n.t('Signin.pla_rightphoneNumber'));
return
}
if(this.state.isDisable){
return
}
Api.sendVerifyCode(this.props.mobile)
.then((data) => {
Toast.show(I18n.t('Signin.Verification_code_transmission_success')) }).catch((e) => {
});
this.setState({
isDisable: false,
});
const codeTime = this.state.timerCount -1;
const now = Date.now();
const overTimeStamp = now + codeTime * 1000 + 100;
/*过期时间戳(毫秒) +100 毫秒容错*/
this.interval = setInterval(() => {
/* 切换到后台不受影响*/
const nowStamp = Date.now();
if (nowStamp >= overTimeStamp) {
/* 倒计时结束*/
this.interval && clearInterval(this.interval);
this.setState({
timerCount: codeTime,
timerTitle: I18n.t('Signin.Get_verifying_code'),
isDisable: false,
});
} else {
const leftTime = parseInt((overTimeStamp - nowStamp) / 1000, 10);
this.setState({
timerCount: leftTime,
timerTitle: `(${leftTime})s`,
isDisable: true,
});
}
/* 切换到后台 timer 停止计时 */
}, 1000)
}
2,界面功能实现
<InputView
{...this.props}
returnKeyLabel={this.props.returnKeyLabel}
returnKeyType={this.props.returnKeyType}
align={this.props.align}
value={this.props.pin}
name={this.props.name}
hintText={this.props.hintText}
funcDisabled={this.state.isDisable}
onChangeText={this.props.onChangeText}
funcName={this.state.timerTitle}
funcOnPress={() => this.daoJClick()}/>
);
三,应用实例
3.1 活动与订单倒计时应用
import CountDown from "../CountDown";
<CountDown
date={endtime}
days={{ plural: '天 ', singular: '天 ' }}
onEnd={() => {
this.setState({
isEnd: true
})
}}
textColor={AppSetting.BLACK}
isHaveword={true}//是否有汉字
backgroundColor={'red'}
isOrederTime={AppSetting.OREDER_END_TIME}//是否是订单
textSize={AdaptationModel.setSpText(Platform.OS === 'ios' ? 18 : 20)}
/>
界面效果
3.2 验证码倒计时
import VeriCodeInput from "/VeriCodeInput"; <VeriCodeInput
style={styles.input}
inputStyle={{ color: 'white' }}
align={'center'}
value={this.state.captcha}
mobile={this.state.mobile}
backgroundColor={'transparent'}
funcNameStyle={{ color: AppSetting.GREEN }}
hintText={I18n.t('Signin.Please_enter_verification_code')}
isClick={() => { this.isinputverification() }}
onChangeText={(text) => this.setState({ captcha: text })} />
界面效果
React Native之倒计时组件的实现(ios android)的更多相关文章
- React Native之code-push的热更新(ios android)
React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...
- React Native之支付集成(微信 支付宝)(ios android)
React Native之支付集成(微信 支付宝)(ios android) 一,需求分析 1.1,app在线充值与提现 二,技术介绍与集成 2.1,微信支付 2.1.1,Android配置 详细配置 ...
- [RN] React Native 封装选择弹出框(ios&android)
之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用. ...
- React Native 简介:用 JavaScript 搭建 iOS 应用(2)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- React Native 简介:用 JavaScript 搭建 iOS 应用 (1)
[编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...
- react native之组织组件
这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...
- React Native 轻松集成分享功能(iOS 篇)
产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...
- React Native 轻松集成统计功能(iOS 篇)
最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-n ...
- React Native常用第三方组件汇总--史上最全 之一
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...
随机推荐
- 《Java大学教程》—第12章 案例研究--第2部分
本章就是上一章的延续,主要是用GUI实现了控制界面. 编程练习:代码附件Hostel.java1. 正确运行2. Runhostel.java3. searchButton
- https 建立连接过程
http://blog.csdn.net/wangjun5159/article/details/51510594 思考问题的顺序 学技术时,总是会问什么?这里也不例外,https为什么会存在,它有什 ...
- 最短路 summary
有四种类型: 单源:dij,spfa,bellman-ford 多源:floyd dij有两种: 一个复杂度为n^2,一个复杂度是m*logn 畅通工程续 某省自从实行了很多年的畅通工程计划后,终于修 ...
- Web开发人员vs网页设计师
Web开发人员vs网页设计师 我们都遇到过,但实际的区别是什么?如果您是该领域的新手,请阅读详细内容,这些内容比您想象的更重要. 经过几周(或几个月)的规划和准备,进行市场调查,与其他企业家交谈,现在 ...
- DataGrid获取单元格的值
string str = (dataGrid.Columns[0].GetCellContent(dataGrid.Items[0]) as TextBlock).Text;
- spool
一.常用设置 set lin 1000 --一行可容纳字符数{80|n};输出大于设置值,则折行显示set wrap on --输出行长度大于设置长度时(set lin n设置);值为on,多余字符另 ...
- Emacs 自动补全插件 ycmd
Emacs 自动补全,最好的插件当属 ycmd.以下记录我的安装过程. 1. 安装 ycmd server github 官方地址: https://github.com/Valloric/ycmd ...
- leetcode:Single Number
public int SingleNumber(int[] nums) { if(nums==null||nums.Length%2==0) return 0; int ret=nums[0]; fo ...
- CF434D Nanami's Power Plant 最小割
传送门 因为连距离限制的边的细节调了贼久QAQ 这个题和HNOI2013 切糕性质相同,都是有距离限制的最小割问题 对于每一个函数,用一条链记录变量\(x\)在不同取值下这个函数的贡献.对于一个\(x ...
- React-理解高阶组件
高阶组件:定义一个函数,传入一个组件,返回另外一个组件,另外一个组件包裹了传入的组件. 分类:属性代理高阶组件,反向继承高阶组件. 作用:代码复用,渲染节时. 高阶函数例子: function hel ...