feat(ui): 添加底部标签栏自定义配置功能和药物堆叠展示
- 新增底部标签栏配置页面,支持切换标签显示/隐藏和恢复默认设置 - 实现已服用药物的堆叠卡片展示,优化药物列表视觉层次 - 集成Redux状态管理底部标签栏配置,支持本地持久化 - 优化个人中心页面背景渐变效果,移除装饰性圆圈元素 - 更新启动页和应用图标为新的品牌视觉 - 药物详情页AI分析加载动画替换为Lottie动画 - 调整药物卡片圆角半径提升视觉一致性 - 新增多语言支持(中英文)用于标签栏配置界面 主要改进: 1. 用户可以自定义底部导航栏显示内容 2. 已完成的药物以堆叠形式展示,节省空间 3. 配置数据通过AsyncStorage持久化保存 4. 支持默认配置恢复功能
This commit is contained in:
@@ -34,6 +34,7 @@ import { Image } from 'expo-image';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import LottieView from 'lottie-react-native';
|
||||
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
@@ -1299,8 +1300,13 @@ export default function MedicationDetailScreen() {
|
||||
</View>
|
||||
|
||||
{aiAnalysisLoading && (
|
||||
<View style={styles.aiLoadingRow}>
|
||||
<ActivityIndicator color={colors.primary} size="small" />
|
||||
<View style={styles.aiLoadingContainer}>
|
||||
<LottieView
|
||||
source={require('@/assets/lottie/loading-blue.json')}
|
||||
autoPlay
|
||||
loop
|
||||
style={styles.aiLoadingAnimation}
|
||||
/>
|
||||
<Text style={[styles.aiLoadingText, { color: colors.textSecondary }]}>
|
||||
{t('medications.detail.aiAnalysis.analyzing')}
|
||||
</Text>
|
||||
@@ -2276,13 +2282,19 @@ const styles = StyleSheet.create({
|
||||
fontSize: 12,
|
||||
fontWeight: '700',
|
||||
},
|
||||
aiLoadingRow: {
|
||||
flexDirection: 'row',
|
||||
aiLoadingContainer: {
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 24,
|
||||
gap: 12,
|
||||
},
|
||||
aiLoadingAnimation: {
|
||||
width: 120,
|
||||
height: 120,
|
||||
},
|
||||
aiLoadingText: {
|
||||
fontSize: 13,
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
},
|
||||
aiHeroRow: {
|
||||
flexDirection: 'row',
|
||||
|
||||
Reference in New Issue
Block a user