ReactNative 计时器组件 - RN

初识 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 (
    <View style={style.rootViewStyle}>
        <View style={style.cellViewStyle}>
            <Text style={style.textStyle}>{YHFormatZero(hour, 2)}</Text>
        </View>
        <View style={style.colonViewStyle}>
            <View style={style.colonStyle}></View>
            <View style={[style.colonStyle, { marginTop : 10 }]}></View>
        </View>
        <View style={style.cellViewStyle}>
            <Text style={style.textStyle}>{YHFormatZero(minute, 2)}</Text>
        </View>
        <View style={style.colonViewStyle}>
            <View style={style.colonStyle}></View>
            <View style={[style.colonStyle, { marginTop : 10 }]}></View>
        </View>
        <View style={style.cellViewStyle}>
            <Text style={style.textStyle}>{YHFormatZero(second, 2)}</Text>
        </View>
        {/*<Text>初始时间{start}</Text>*/}
    </View>
);

最后，在需要的方法中调用该组件即可

 

完整版本

计时器组件

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 (
        <View style={style.rootViewStyle}>
            <View style={style.cellViewStyle}>
                <Text style={style.textStyle}>{YHFormatZero(hour, 2)}</Text>
            </View>
            <View style={style.colonViewStyle}>
                <View style={style.colonStyle}></View>
                <View style={[style.colonStyle, { marginTop : 10 }]}></View>
            </View>
            <View style={style.cellViewStyle}>
                <Text style={style.textStyle}>{YHFormatZero(minute, 2)}</Text>
            </View>
            <View style={style.colonViewStyle}>
                <View style={style.colonStyle}></View>
                <View style={[style.colonStyle, { marginTop : 10 }]}></View>
            </View>
            <View style={style.cellViewStyle}>
                <Text style={style.textStyle}>{YHFormatZero(second, 2)}</Text>
            </View>
            {/*<Text>初始时间{start}</Text>*/}
        </View>
    );
};
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) { // 当前数字位数不足即向数值前面位数补零
    /**
     * 例如：
     * <Text>{formatZero(数值,位数)}</Text>
     */
    if(String(num).length > len) return num;
    return (Array(len).join(0) + num).slice(-len);
}

---

以上便是此次分享的全部内容，希望能对大家有所帮助！