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)的更多相关文章

  1. React Native之code-push的热更新(ios android)

    React Native之code-push的热更新(ios android) React Native支持大家用React Native技术开发APP,并打包生成一个APP.在动态更新方面React ...

  2. React Native之支付集成(微信 支付宝)(ios android)

    React Native之支付集成(微信 支付宝)(ios android) 一,需求分析 1.1,app在线充值与提现 二,技术介绍与集成 2.1,微信支付 2.1.1,Android配置 详细配置 ...

  3. [RN] React Native 封装选择弹出框(ios&android)

    之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用. ...

  4. React Native 简介:用 JavaScript 搭建 iOS 应用(2)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  5. React Native 简介:用 JavaScript 搭建 iOS 应用 (1)

    [编者按]本篇文章的作者是 Joyce Echessa--渥合数位服务创办人,毕业于台湾大学,近年来专注于协助客户进行 App 软体以及网站开发.本篇文章中,作者介绍通过 React Native 框 ...

  6. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  7. React Native 轻松集成分享功能(iOS 篇)

    产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...

  8. React Native 轻松集成统计功能(iOS 篇)

    最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-n ...

  9. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

随机推荐

  1. 《Java大学教程》—第12章 案例研究--第2部分

    本章就是上一章的延续,主要是用GUI实现了控制界面. 编程练习:代码附件Hostel.java1.    正确运行2.    Runhostel.java3.    searchButton

  2. https 建立连接过程

    http://blog.csdn.net/wangjun5159/article/details/51510594 思考问题的顺序 学技术时,总是会问什么?这里也不例外,https为什么会存在,它有什 ...

  3. 最短路 summary

    有四种类型: 单源:dij,spfa,bellman-ford 多源:floyd dij有两种: 一个复杂度为n^2,一个复杂度是m*logn 畅通工程续 某省自从实行了很多年的畅通工程计划后,终于修 ...

  4. Web开发人员vs网页设计师

    Web开发人员vs网页设计师 我们都遇到过,但实际的区别是什么?如果您是该领域的新手,请阅读详细内容,这些内容比您想象的更重要. 经过几周(或几个月)的规划和准备,进行市场调查,与其他企业家交谈,现在 ...

  5. DataGrid获取单元格的值

    string str = (dataGrid.Columns[0].GetCellContent(dataGrid.Items[0]) as TextBlock).Text;

  6. spool

    一.常用设置 set lin 1000 --一行可容纳字符数{80|n};输出大于设置值,则折行显示set wrap on --输出行长度大于设置长度时(set lin n设置);值为on,多余字符另 ...

  7. Emacs 自动补全插件 ycmd

    Emacs 自动补全,最好的插件当属 ycmd.以下记录我的安装过程. 1. 安装 ycmd server github 官方地址: https://github.com/Valloric/ycmd ...

  8. leetcode:Single Number

    public int SingleNumber(int[] nums) { if(nums==null||nums.Length%2==0) return 0; int ret=nums[0]; fo ...

  9. CF434D Nanami's Power Plant 最小割

    传送门 因为连距离限制的边的细节调了贼久QAQ 这个题和HNOI2013 切糕性质相同,都是有距离限制的最小割问题 对于每一个函数,用一条链记录变量\(x\)在不同取值下这个函数的贡献.对于一个\(x ...

  10. React-理解高阶组件

    高阶组件:定义一个函数,传入一个组件,返回另外一个组件,另外一个组件包裹了传入的组件. 分类:属性代理高阶组件,反向继承高阶组件. 作用:代码复用,渲染节时. 高阶函数例子: function hel ...