初识 ReactNative 正巧项目中遇到了一个计时器的需求,官方没有找到提供现成的组件便尝试着用钩子方式(useState、useEffect)简单封装了个小组件,具体如下:
基于 ReactNative 版本如下:
react-native-cli: 2.0.1
react-native: 0.61.5
首先,将时间进行转换处理并与钩子相互关联
const [span, setSpan] = useState(Math.floor((Date.now() - new Date(start.replace(/-/g, '/'))) / 1000));
const [hour, setHour] = useState(0);
const [minute, setMinute] = useState(0);
const [second, setSecond] = useState(0);
useEffect(() => { // 时间转换处理
const internal = setInterval(() => {
setHour(Math.floor(span / 3600));
setMinute(Math.floor((span % 3600) / 60));
setSecond(span % 60);
setSpan(span + 1);
}, 1000);
return () => clearInterval(internal);
});
其次,创建视图并调试样式
return (
{YHFormatZero(hour, 2)}
{YHFormatZero(minute, 2)}
{YHFormatZero(second, 2)}
{/*初始时间{start} */}
);
最后,在需要的方法中调用该组件即可
计时器组件
import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import ThemeColor from '../../component/colors';
import { YHFormatZero } from '../utilityClass/YHUtility';
const YHCountDownView = ({ start }) => { // 视图控件 - 倒计时
const [span, setSpan] = useState(Math.floor((Date.now() - new Date(start.replace(/-/g, '/'))) / 1000));
const [hour, setHour] = useState(0);
const [minute, setMinute] = useState(0);
const [second, setSecond] = useState(0);
useEffect(() => { // 时间转换处理
const internal = setInterval(() => {
setHour(Math.floor(span / 3600));
setMinute(Math.floor((span % 3600) / 60));
setSecond(span % 60);
setSpan(span + 1);
}, 1000);
return () => clearInterval(internal);
});
return (
{YHFormatZero(hour, 2)}
{YHFormatZero(minute, 2)}
{YHFormatZero(second, 2)}
{/*初始时间{start} */}
);
};
export default YHCountDownView;
const style = StyleSheet.create({ // 视图样式相关
rootViewStyle : {
flex : 1,
flexDirection : 'row',
backgroundColor : ThemeColor.blue,
},
cellViewStyle : {
flex : 4,
backgroundColor : '#ffffff',
borderWidth : 1,
borderColor : '#38B0EC',
borderRadius : 4,
justifyContent : 'center',
alignItems : 'center',
},
colonViewStyle : {
flex : 1,
backgroundColor : ThemeColor.blue,
justifyContent : 'center',
alignItems : 'center',
},
colonStyle : {
width : 8,
height : 8,
backgroundColor : '#ffffff',
borderRadius : 2,
},
textStyle : {
color : '#ED785C',
fontSize : 50,
}
});
位数补零工具类
export function YHFormatZero(num, len) { // 当前数字位数不足即向数值前面位数补零
/**
* 例如:
* {formatZero(数值,位数)}
*/
if(String(num).length > len) return num;
return (Array(len).join(0) + num).slice(-len);
}
以上便是此次分享的全部内容,希望能对大家有所帮助!