taro/src/app/time_of_day/index_time.tsx

import { View, Text, Image } from "@tarojs/components";
import './index_time.scss';
import { jumpPage } from "@/features/trackTimeDuration/hooks/Common";
import { getCommon, getDot } from "@/features/trackTimeDuration/hooks/RingData";
import Rings, { RingCommon, BgRing, CurrentDot } from "@/features/trackTimeDuration/components/Rings";
import { useEffect, useState } from "react";
import dayjs from "dayjs";

let LinearGradient, useActionSheet, useNavigation
if (process.env.TARO_ENV == 'rn') {
    LinearGradient = require('react-native-linear-gradient').default
    useActionSheet = require('@expo/react-native-action-sheet').useActionSheet
    useNavigation = require("@react-navigation/native").useNavigation
}

export default function IndexTimePage() {
    let navigation;
    if (useNavigation) {
        navigation = useNavigation()
    }

    const [count, setCount] = useState(0)


    useEffect(() => {
        setInterval(() => {
            setCount(t => t + 1)
        }, 1000)
    }, [])

    function chooseLocation() {
        jumpPage('', 'map', navigation)
    }

    const common: RingCommon = {
        useCase: 'ChooseScenario',
        radius: 115,
        lineWidth: 26,
        isFast: true,
        status: 'WAIT_FOR_START'
    }

    const bgRing: BgRing = {
        color: '#EAE9E9'
    }


    function ring() {
        const currentDot: CurrentDot = {
            color: '#CACACA',
            lineWidth: 10,
            borderColor: '#ffffff',
            offset: 0
        }

        // var common = getCommon(null, true)
        // common.radius = 115;
        // common.lineWidth = 26;
        // var bgRing = getBgRing()
        // var realRing = getReal(record, false, false)
        // return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'small'} />
        return <Rings common={common} bgRing={bgRing} currentDot={currentDot} canvasId={'smal11l'} />
    }

    return <View className="page_container">
        <View style={{ position: 'relative' }}>
            {
                ring()
            }
            <View className="ring_center">
                <Image className="sun" src={require('@assets/index_time/sun.png')} />
                <Text className="time">{dayjs().format('HH:mm:ss')}</Text>
                <Text className="date">{dayjs().format('dddd, MMM DD')}</Text>
            </View>
        </View>

        <View className="location">
            <Image className="location_icon" src={require('@assets/index_time/pin.png')} />
            <Text className="location_text">Beijing</Text>
        </View>

        <Text className="timezone">UTC+8</Text>

        <View className="btn_bg" onClick={chooseLocation}>
            <Text className="btn_text">Pick Location</Text>
        </View>
        <View className="footer">
            <Text className="footer_text">English</Text>
            <Image className="footer_icon" src={require('@assets/index_time/arrow.png')} />
        </View>
    </View>
}