feat: 更新健康数据功能和用户个人信息页面
- 在 Explore 页面中添加日期选择功能,允许用户查看指定日期的健康数据 - 重构健康数据获取逻辑,支持根据日期获取健康数据 - 在个人信息页面中集成用户资料编辑功能,支持姓名、性别、年龄、体重和身高的输入 - 新增 AnimatedNumber 和 CircularRing 组件,优化数据展示效果 - 更新 package.json 和 package-lock.json,添加 react-native-svg 依赖 - 修改布局以支持新功能的显示和交互
This commit is contained in:
47
components/AnimatedNumber.tsx
Normal file
47
components/AnimatedNumber.tsx
Normal 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>;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user