8ffebfb297
- 在 Explore 页面中添加日期选择功能，允许用户查看指定日期的健康数据 - 重构健康数据获取逻辑，支持根据日期获取健康数据 - 在个人信息页面中集成用户资料编辑功能，支持姓名、性别、年龄、体重和身高的输入 - 新增 AnimatedNumber 和 CircularRing 组件，优化数据展示效果 - 更新 package.json 和 package-lock.json，添加 react-native-svg 依赖 - 修改布局以支持新功能的显示和交互
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react';
|
||
import { Animated, Easing, TextStyle } from 'react-native';
|
||
|
||
type AnimatedNumberProps = {
|
||
value: number; // 最终值
|
||
durationMs?: number;
|
||
format?: (v: number) => string;
|
||
style?: TextStyle;
|
||
/** 当该值变化时，从0重新动画 */
|
||
resetToken?: unknown;
|
||
};
|
||
|
||
export function AnimatedNumber({
|
||
value,
|
||
durationMs = 800,
|
||
format,
|
||
style,
|
||
resetToken,
|
||
}: AnimatedNumberProps) {
|
||
const animated = useRef(new Animated.Value(0)).current;
|
||
const [display, setDisplay] = useState<string>('0');
|
||
|
||
useEffect(() => {
|
||
animated.stopAnimation(() => {
|
||
animated.setValue(0);
|
||
Animated.timing(animated, {
|
||
toValue: value,
|
||
duration: durationMs,
|
||
easing: Easing.out(Easing.cubic),
|
||
useNativeDriver: false,
|
||
}).start();
|
||
});
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [value, resetToken]);
|
||
|
||
useEffect(() => {
|
||
const id = animated.addListener(({ value: v }) => {
|
||
const num = Number(v) || 0;
|
||
setDisplay(format ? format(num) : `${Math.round(num)}`);
|
||
});
|
||
return () => animated.removeListener(id);
|
||
}, [animated, format]);
|
||
|
||
return <Animated.Text style={style}>{display}</Animated.Text>;
|
||
}
|
||
|
||
|