richarjiang
5a4d86ff7d
- 修改 app.json，禁用平板支持以优化用户体验 - 在 package.json 和 package-lock.json 中新增 react-native-toast-message 依赖，支持消息提示功能 - 在多个组件中集成 Toast 组件，提升用户交互反馈 - 更新训练计划相关逻辑，优化状态管理和数据处理 - 调整样式以适应新功能的展示和交互
445 lines
11 KiB
TypeScript
445 lines
11 KiB
TypeScript
import { useAuthGuard } from '@/hooks/useAuthGuard';
|
||
import {
|
||
BMI_CATEGORIES,
|
||
canCalculateBMI,
|
||
getBMIResult,
|
||
type BMIResult
|
||
} from '@/utils/bmi';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import React, { useState } from 'react';
|
||
import {
|
||
Modal,
|
||
Pressable,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View,
|
||
} from 'react-native';
|
||
import Toast from 'react-native-toast-message';
|
||
|
||
interface BMICardProps {
|
||
weight?: number;
|
||
height?: number;
|
||
style?: any;
|
||
}
|
||
|
||
export function BMICard({ weight, height, style }: BMICardProps) {
|
||
const { pushIfAuthedElseLogin } = useAuthGuard();
|
||
const [showInfoModal, setShowInfoModal] = useState(false);
|
||
|
||
const canCalculate = canCalculateBMI(weight, height);
|
||
let bmiResult: BMIResult | null = null;
|
||
|
||
|
||
|
||
if (canCalculate && weight && height) {
|
||
try {
|
||
bmiResult = getBMIResult(weight, height);
|
||
} catch (error) {
|
||
console.warn('BMI 计算错误:', error);
|
||
}
|
||
}
|
||
|
||
const handleGoToProfile = () => {
|
||
Toast.show({
|
||
text1: '请先登录',
|
||
type: 'info',
|
||
});
|
||
pushIfAuthedElseLogin('/profile/edit');
|
||
};
|
||
|
||
const handleShowInfoModal = () => {
|
||
setShowInfoModal(true);
|
||
};
|
||
|
||
const handleHideInfoModal = () => {
|
||
setShowInfoModal(false);
|
||
};
|
||
|
||
const renderContent = () => {
|
||
if (!canCalculate) {
|
||
// 缺少数据的情况
|
||
return (
|
||
<View style={styles.incompleteContent}>
|
||
<View style={styles.cardHeader}>
|
||
<View style={styles.titleRow}>
|
||
<View style={styles.iconSquare}>
|
||
<Ionicons name="fitness-outline" size={18} color="#192126" />
|
||
</View>
|
||
<Text style={styles.cardTitle}>BMI 指数</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={handleShowInfoModal}
|
||
style={styles.infoButton}
|
||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||
>
|
||
<Ionicons name="information-circle-outline" size={20} color="#9AA3AE" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<View style={styles.missingDataContainer}>
|
||
<Ionicons name="alert-circle-outline" size={24} color="#F59E0B" />
|
||
<Text style={styles.missingDataText}>
|
||
{!weight && !height ? '请完善身高和体重信息' :
|
||
!weight ? '请完善体重信息' : '请完善身高信息'}
|
||
</Text>
|
||
</View>
|
||
|
||
<TouchableOpacity
|
||
onPress={handleGoToProfile}
|
||
style={styles.completeButton}
|
||
activeOpacity={0.8}
|
||
>
|
||
<Text style={styles.completeButtonText}>前往完善</Text>
|
||
<Ionicons name="chevron-forward" size={16} color="#6B7280" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
// 有完整数据的情况
|
||
return (
|
||
<View style={[styles.completeContent, { backgroundColor: bmiResult?.backgroundColor }]}>
|
||
<View style={styles.cardHeader}>
|
||
<View style={styles.titleRow}>
|
||
<View style={styles.iconSquare}>
|
||
<Ionicons name="fitness-outline" size={18} color="#192126" />
|
||
</View>
|
||
<Text style={styles.cardTitle}>BMI 指数</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
onPress={handleShowInfoModal}
|
||
style={styles.infoButton}
|
||
hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
|
||
>
|
||
<Ionicons name="information-circle-outline" size={20} color="#9AA3AE" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<View style={styles.bmiValueContainer}>
|
||
<Text style={[styles.bmiValue, { color: bmiResult?.color }]}>
|
||
{bmiResult?.value}
|
||
</Text>
|
||
<View style={[styles.categoryBadge, { backgroundColor: bmiResult?.color + '20' }]}>
|
||
<Text style={[styles.categoryText, { color: bmiResult?.color }]}>
|
||
{bmiResult?.category.name}
|
||
</Text>
|
||
</View>
|
||
</View>
|
||
|
||
<Text style={[styles.bmiDescription, { color: bmiResult?.color }]}>
|
||
{bmiResult?.description}
|
||
</Text>
|
||
|
||
<Text style={styles.encouragementText}>
|
||
{bmiResult?.category.encouragement}
|
||
</Text>
|
||
</View>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<View style={[styles.card, style]}>
|
||
{renderContent()}
|
||
</View>
|
||
|
||
{/* BMI 信息弹窗 */}
|
||
<Modal
|
||
visible={showInfoModal}
|
||
transparent
|
||
animationType="fade"
|
||
onRequestClose={handleHideInfoModal}
|
||
>
|
||
<Pressable
|
||
style={styles.modalBackdrop}
|
||
onPress={handleHideInfoModal}
|
||
>
|
||
<Pressable style={styles.modalContainer} onPress={(e) => e.stopPropagation()}>
|
||
<View style={styles.modalContent}>
|
||
<View style={styles.modalHeader}>
|
||
<Text style={styles.modalTitle}>BMI 指数说明</Text>
|
||
<TouchableOpacity
|
||
onPress={handleHideInfoModal}
|
||
style={styles.closeButton}
|
||
activeOpacity={0.7}
|
||
>
|
||
<Ionicons name="close" size={20} color="#6B7280" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
|
||
<ScrollView
|
||
style={styles.modalBody}
|
||
showsVerticalScrollIndicator={false}
|
||
contentContainerStyle={{ paddingBottom: 20 }}
|
||
>
|
||
<Text style={styles.modalDescription}>
|
||
BMI（身体质量指数）是评估体重与身高关系的常用指标，计算公式为：体重(kg) ÷ 身高²(m)
|
||
</Text>
|
||
|
||
<Text style={styles.sectionTitle}>BMI 分类标准</Text>
|
||
{BMI_CATEGORIES.map((category, index) => {
|
||
const colors = index === 0 ? { bg: '#FFF4E6', text: '#8B7355' } :
|
||
index === 1 ? { bg: '#E8F5E8', text: '#2D5016' } :
|
||
index === 2 ? { bg: '#FEF3C7', text: '#B45309' } :
|
||
{ bg: '#FEE2E2', text: '#B91C1C' };
|
||
|
||
return (
|
||
<View key={index} style={[styles.categoryItem, { backgroundColor: colors.bg }]}>
|
||
<View style={styles.categoryHeader}>
|
||
<Text style={[styles.categoryName, { color: colors.text }]}>
|
||
{category.name}
|
||
</Text>
|
||
<Text style={[styles.categoryRange, { color: colors.text }]}>
|
||
{category.range}
|
||
</Text>
|
||
</View>
|
||
<Text style={styles.categoryAdvice}>
|
||
{category.advice}
|
||
</Text>
|
||
</View>
|
||
);
|
||
})}
|
||
|
||
<Text style={styles.disclaimer}>
|
||
* BMI 仅供参考，不能完全反映身体健康状况。如有疑问，请咨询专业医生。
|
||
</Text>
|
||
</ScrollView>
|
||
</View>
|
||
</Pressable>
|
||
</Pressable>
|
||
</Modal>
|
||
</>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
card: {
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
marginBottom: 16,
|
||
overflow: 'hidden',
|
||
},
|
||
cardHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
marginBottom: 12,
|
||
},
|
||
titleRow: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
},
|
||
iconSquare: {
|
||
width: 30,
|
||
height: 30,
|
||
borderRadius: 8,
|
||
backgroundColor: '#FFFFFF',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
marginRight: 10,
|
||
},
|
||
cardTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '800',
|
||
color: '#192126',
|
||
},
|
||
infoButton: {
|
||
padding: 4,
|
||
},
|
||
|
||
// 缺少数据时的样式
|
||
incompleteContent: {
|
||
minHeight: 120,
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
margin: -18,
|
||
},
|
||
missingDataContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
backgroundColor: '#FEF3C7',
|
||
borderRadius: 12,
|
||
padding: 12,
|
||
marginBottom: 12,
|
||
},
|
||
missingDataText: {
|
||
fontSize: 14,
|
||
color: '#B45309',
|
||
fontWeight: '600',
|
||
marginLeft: 8,
|
||
flex: 1,
|
||
},
|
||
completeButton: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: '#F3F4F6',
|
||
borderRadius: 12,
|
||
paddingVertical: 12,
|
||
paddingHorizontal: 16,
|
||
},
|
||
completeButtonText: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
color: '#6B7280',
|
||
marginRight: 4,
|
||
},
|
||
|
||
// 有完整数据时的样式
|
||
completeContent: {
|
||
minHeight: 120,
|
||
borderRadius: 22,
|
||
padding: 18,
|
||
margin: -18,
|
||
},
|
||
bmiValueContainer: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
marginBottom: 8,
|
||
},
|
||
bmiValue: {
|
||
fontSize: 32,
|
||
fontWeight: '800',
|
||
marginRight: 12,
|
||
},
|
||
categoryBadge: {
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 4,
|
||
borderRadius: 12,
|
||
},
|
||
categoryText: {
|
||
fontSize: 14,
|
||
fontWeight: '700',
|
||
},
|
||
bmiDescription: {
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
marginBottom: 8,
|
||
},
|
||
encouragementText: {
|
||
fontSize: 13,
|
||
color: '#6B7280',
|
||
fontWeight: '500',
|
||
lineHeight: 18,
|
||
fontStyle: 'italic',
|
||
},
|
||
|
||
// 弹窗样式
|
||
modalBackdrop: {
|
||
flex: 1,
|
||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
padding: 20,
|
||
},
|
||
modalContainer: {
|
||
width: '90%',
|
||
maxHeight: '85%',
|
||
backgroundColor: '#FFFFFF',
|
||
borderRadius: 24,
|
||
overflow: 'hidden',
|
||
elevation: 20,
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 8 },
|
||
shadowOpacity: 0.3,
|
||
shadowRadius: 20,
|
||
},
|
||
modalContent: {
|
||
maxHeight: '100%',
|
||
},
|
||
modalHeader: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
padding: 24,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#F3F4F6',
|
||
backgroundColor: '#FAFAFA',
|
||
},
|
||
modalTitle: {
|
||
fontSize: 22,
|
||
fontWeight: '800',
|
||
color: '#111827',
|
||
letterSpacing: -0.5,
|
||
},
|
||
closeButton: {
|
||
padding: 8,
|
||
borderRadius: 20,
|
||
backgroundColor: '#F3F4F6',
|
||
},
|
||
modalBody: {
|
||
paddingHorizontal: 24,
|
||
paddingVertical: 20,
|
||
},
|
||
modalDescription: {
|
||
fontSize: 16,
|
||
color: '#4B5563',
|
||
lineHeight: 26,
|
||
marginBottom: 28,
|
||
textAlign: 'center',
|
||
backgroundColor: '#F8FAFC',
|
||
padding: 16,
|
||
borderRadius: 12,
|
||
borderLeftWidth: 4,
|
||
borderLeftColor: '#3B82F6',
|
||
},
|
||
sectionTitle: {
|
||
fontSize: 20,
|
||
fontWeight: '800',
|
||
color: '#111827',
|
||
marginBottom: 16,
|
||
letterSpacing: -0.3,
|
||
},
|
||
categoryItem: {
|
||
borderRadius: 16,
|
||
padding: 20,
|
||
marginBottom: 16,
|
||
borderWidth: 1,
|
||
borderColor: 'rgba(0,0,0,0.05)',
|
||
shadowColor: '#000',
|
||
shadowOffset: { width: 0, height: 2 },
|
||
shadowOpacity: 0.05,
|
||
shadowRadius: 4,
|
||
elevation: 2,
|
||
},
|
||
categoryHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
categoryName: {
|
||
fontSize: 18,
|
||
fontWeight: '800',
|
||
letterSpacing: -0.2,
|
||
},
|
||
categoryRange: {
|
||
fontSize: 15,
|
||
fontWeight: '700',
|
||
backgroundColor: 'rgba(255,255,255,0.8)',
|
||
paddingHorizontal: 12,
|
||
paddingVertical: 4,
|
||
borderRadius: 20,
|
||
},
|
||
categoryAdvice: {
|
||
fontSize: 15,
|
||
color: '#374151',
|
||
lineHeight: 22,
|
||
fontWeight: '500',
|
||
},
|
||
disclaimer: {
|
||
fontSize: 13,
|
||
color: '#6B7280',
|
||
fontStyle: 'italic',
|
||
marginTop: 24,
|
||
textAlign: 'center',
|
||
backgroundColor: '#F9FAFB',
|
||
padding: 16,
|
||
borderRadius: 12,
|
||
lineHeight: 20,
|
||
},
|
||
});
|