feat: 更新健康数据功能和用户个人信息页面

- 在 Explore 页面中添加日期选择功能,允许用户查看指定日期的健康数据
- 重构健康数据获取逻辑,支持根据日期获取健康数据
- 在个人信息页面中集成用户资料编辑功能,支持姓名、性别、年龄、体重和身高的输入
- 新增 AnimatedNumber 和 CircularRing 组件,优化数据展示效果
- 更新 package.json 和 package-lock.json,添加 react-native-svg 依赖
- 修改布局以支持新功能的显示和交互
This commit is contained in:
richarjiang
2025-08-12 18:54:15 +08:00
parent 2fac3f899c
commit 8ffebfb297
14 changed files with 1034 additions and 72 deletions

View File

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