update

src/app.config.ts

@@ -1,3 +1,5 @@
+import { kIsIOS } from "./utils/tools";
+
 const appConfig = defineAppConfig({
   pages: [
     // 'pages/clock/Index',

src/app/time_of_day/index_time.scss

@@ -0,0 +1,105 @@
+.page_container{
+    flex: 1;
+    background-color: #fff;
+    align-items: center;
+    padding-top: 300px;
+}
+
+.btn_bg{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 500px;
+    height: 120px;
+    background-color: #fff;
+    border-radius: 60px;
+    box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
+    margin-top: 88px;
+}
+
+.btn_text{
+    color: #CACACA;
+    font-weight: bold;
+    font-size: 40px;
+}
+
+.footer{
+    position: absolute;
+    bottom: 116px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+}
+
+.footer_detail{
+    flex-direction: row;
+    align-items: center;
+}
+
+.footer_text{
+    font-weight: bold;
+    font-size: 28px;
+    color: #CACACA;
+}
+
+.footer_icon{
+    width: 28px;
+    height: 28px;
+}
+
+.ring_center{
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    align-items: center;
+    justify-content: center;
+}
+
+.sun{
+    width: 48px;
+    height: 48px;
+}
+.time{
+    margin-top: 20px;
+    font-weight: bold;
+    font-size: 72px;
+    line-height: 72px;
+    color: #CACACA;
+}
+
+.date{
+    margin-top: 20px;
+    font-weight: bold;
+    font-size: 32px;
+    line-height: 36px;
+    color: #CACACA;
+}
+
+.location{
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    margin-top: 144px;
+}
+
+.location_icon{
+    width: 32px;
+    height: 32px;
+}
+
+.location_text{
+    font-weight: bold;
+    color: #CACACA;
+    font-size: 40px;
+    margin-left: 8px;
+}
+
+.timezone{
+    margin-top: 20px;
+    font-size: 24px;
+    font-weight: bold;
+    color: #CACACA;
+}

src/app/time_of_day/index_time.tsx

@@ -0,0 +1,92 @@
+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>
+}

src/app/time_of_day/my_places.tsx

@@ -0,0 +1,7 @@
+import { View } from "@tarojs/components";
+
+export default function MyPlacesPage(){
+    return <View>
+
+    </View>
+}

src/features/trackTimeDuration/components/Rings.rn.tsx

@@ -158,10 +158,10 @@ export default function Component(props: {
                     cy={center}
                     r={radius}
                     fillOpacity={0}
-                    stroke={'#1c1c1c'}
+                    stroke={props.currentDot.borderColor?props.currentDot.borderColor:'#1c1c1c'}
                     transform={`rotate(${arc / (2 * Math.PI) * 360} ${center} ${center})`}
                     strokeDasharray={`0,1000`}
-                    strokeWidth={lineWidth + 4}
+                    strokeWidth={lineWidth + props.currentDot.lineWidth}
                     strokeLinecap="round"
                 />
             }

src/features/trackTimeDuration/hooks/RingData.tsx

@@ -66,15 +66,15 @@ export const getBgRing = () => {
 export const getDot = (data: any, isBigRing: boolean) => {
     const currentDotBig: CurrentDot = {
         color: global.fastColor ? global.fastColor : ColorType.fast,
-        lineWidth: 8,
-        borderColor: 'black',
+        lineWidth: 4,
+        borderColor: '#1c1c1c',
         offset:0
     }
 
     const currentDotSmall: CurrentDot = {
         color: global.sleepColor ? global.sleepColor : ColorType.sleep,
-        lineWidth: 8,
-        borderColor: 'black',
+        lineWidth: 4,
+        borderColor: '#1c1c1c',
         offset:0
     }
 

src/pages/rn/RNMain.tsx

@@ -27,6 +27,10 @@ import NotificationSetting from '@/pages/notification/setting';
 import { Image, PixelRatio } from 'react-native';
 import ProductList from '../store/product_list';
 import map from '../map/map';
+import { kIsAndroid, kIsIOS } from '@/utils/tools';
+import { View, Text } from '@tarojs/components';
+import IndexTimePage from '@/app/time_of_day/index_time';
+import MyPlacesPage from '@/app/time_of_day/my_places';
 // import { View,Image } from '@tarojs/components';
 
 // 创建底部 Tab 导航器
@@ -76,6 +80,41 @@ export default function RNMain() {
   const ProfilePage = () => <Profile />
   // const FoodPage = ()=><Food/>
 
+  if (kIsAndroid) {
+    // return <IndexTimePage />
+    return <NavigationContainer theme={{
+      dark: false,
+      colors: {
+        text: 'white',
+        primary: 'white',
+        card: 'white',
+        border: 'transparent',
+        background: 'black',
+        notification: 'red'
+      }
+    }}>
+      <Stack.Navigator screenOptions={({ route }) => ({
+        headerStyle: {
+          backgroundColor: 'black',
+          borderBottomWidth: 0, // 隐藏导航条底部边框
+          borderBottomColor: 'red'
+        },
+        headerTintColor: 'white',
+        tabBarStyle: { backgroundColor: 'black' }, // tabbar的背景色
+        tabBarActiveTintColor: 'white', // 活动标签的颜色
+        tabBarInactiveTintColor: 'gray', // 非活动标签的颜色
+      })}>
+        <Stack.Screen name='IndexTimePage' component={IndexTimePage} options={{ headerShown: false }} />
+        <Stack.Screen name='MyPlaces' component={MyPlacesPage} options={{
+          headerBackTitle: ' '
+        }} />
+        <Stack.Screen name='map' component={map} options={{
+          headerBackTitle: ' '
+        }} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  }
+
   function tabNavigator() {
     return (
       <Tab.Navigator
@@ -123,7 +162,7 @@ export default function RNMain() {
               />
             );
           },
-        }} /> 
+        }} />
         {/* <Tab.Screen name="Explore" component={ExplorePage} options={{
           tabBarIcon: ({ size, focused, color }) => {
             return (