b27099c6d9
- 移除流式分析文本显示，简化用户界面 - 修复ImagePicker媒体类型配置，使用数组格式 - 简化API响应处理逻辑，直接使用服务端返回数据 - 移除旧格式转换函数，统一使用新的API响应格式 - 清理冗余状态变量和UI组件，提升代码可维护性
717 lines
20 KiB
TypeScript
717 lines
20 KiB
TypeScript
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||
import { Colors } from '@/constants/Colors';
|
||
import { useCosUpload } from '@/hooks/useCosUpload';
|
||
import { useSafeAreaTop } from '@/hooks/useSafeAreaWithPadding';
|
||
import {
|
||
analyzeNutritionImage,
|
||
analyzeNutritionLabelStream,
|
||
type NutritionAnalysisResponse
|
||
} from '@/services/nutritionLabelAnalysis';
|
||
import { triggerLightHaptic } from '@/utils/haptics';
|
||
import { Ionicons } from '@expo/vector-icons';
|
||
import dayjs from 'dayjs';
|
||
import { Image } from 'expo-image';
|
||
import * as ImagePicker from 'expo-image-picker';
|
||
import { LinearGradient } from 'expo-linear-gradient';
|
||
import { useRouter } from 'expo-router';
|
||
import React, { useCallback, useRef, useState } from 'react';
|
||
import {
|
||
ActivityIndicator,
|
||
Alert,
|
||
BackHandler,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
TouchableOpacity,
|
||
View
|
||
} from 'react-native';
|
||
import ImageViewing from 'react-native-image-viewing';
|
||
|
||
export default function NutritionLabelAnalysisScreen() {
|
||
const safeAreaTop = useSafeAreaTop();
|
||
const router = useRouter();
|
||
const { upload, uploading: uploadingToCos, progress: uploadProgress } = useCosUpload({
|
||
prefix: 'nutrition-labels'
|
||
});
|
||
|
||
const [imageUri, setImageUri] = useState<string | null>(null);
|
||
const [isAnalyzing, setIsAnalyzing] = useState(false);
|
||
const [showImagePreview, setShowImagePreview] = useState(false);
|
||
const [newAnalysisResult, setNewAnalysisResult] = useState<NutritionAnalysisResponse | null>(null);
|
||
const [isUploading, setIsUploading] = useState(false);
|
||
|
||
// 流式请求相关引用
|
||
const streamAbortRef = useRef<{ abort: () => void } | null>(null);
|
||
const scrollViewRef = useRef<ScrollView>(null);
|
||
|
||
// 处理Android返回键关闭图片预览
|
||
React.useEffect(() => {
|
||
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => {
|
||
if (showImagePreview) {
|
||
setShowImagePreview(false);
|
||
return true; // 阻止默认返回行为
|
||
}
|
||
return false;
|
||
});
|
||
|
||
return () => backHandler.remove();
|
||
}, [showImagePreview]);
|
||
|
||
// 组件卸载时清理流式请求
|
||
React.useEffect(() => {
|
||
return () => {
|
||
try {
|
||
if (streamAbortRef.current) {
|
||
streamAbortRef.current.abort();
|
||
streamAbortRef.current = null;
|
||
}
|
||
} catch (error) {
|
||
console.warn('[NUTRITION_ANALYSIS] Error aborting stream on unmount:', error);
|
||
}
|
||
};
|
||
}, []);
|
||
|
||
// 请求相机权限
|
||
const requestCameraPermission = async () => {
|
||
const { status } = await ImagePicker.requestCameraPermissionsAsync();
|
||
if (status !== 'granted') {
|
||
Alert.alert('权限不足', '需要相机权限才能拍摄成分表');
|
||
return false;
|
||
}
|
||
return true;
|
||
};
|
||
|
||
// 拍照
|
||
const takePhoto = async () => {
|
||
const hasPermission = await requestCameraPermission();
|
||
if (!hasPermission) return;
|
||
|
||
triggerLightHaptic();
|
||
|
||
const result = await ImagePicker.launchCameraAsync({
|
||
mediaTypes: ['images'],
|
||
allowsEditing: true,
|
||
aspect: [4, 3],
|
||
quality: 0.8,
|
||
});
|
||
|
||
if (!result.canceled && result.assets[0]) {
|
||
setImageUri(result.assets[0].uri);
|
||
setNewAnalysisResult(null); // 清除之前的分析结果
|
||
}
|
||
};
|
||
|
||
// 从相册选择
|
||
const pickImage = async () => {
|
||
triggerLightHaptic();
|
||
|
||
const result = await ImagePicker.launchImageLibraryAsync({
|
||
mediaTypes: ['images'],
|
||
allowsEditing: true,
|
||
aspect: [4, 3],
|
||
quality: 0.8,
|
||
});
|
||
|
||
if (!result.canceled && result.assets[0]) {
|
||
setImageUri(result.assets[0].uri);
|
||
setNewAnalysisResult(null); // 清除之前的分析结果
|
||
}
|
||
};
|
||
|
||
// 取消当前分析
|
||
const cancelAnalysis = useCallback(() => {
|
||
try {
|
||
console.log('[NUTRITION_ANALYSIS] User cancelled analysis');
|
||
|
||
// 中断网络请求
|
||
if (streamAbortRef.current) {
|
||
streamAbortRef.current.abort();
|
||
streamAbortRef.current = null;
|
||
}
|
||
|
||
// 清理状态
|
||
setIsAnalyzing(false);
|
||
|
||
// 触觉反馈
|
||
triggerLightHaptic();
|
||
} catch (error) {
|
||
console.warn('[NUTRITION_ANALYSIS] Error cancelling analysis:', error);
|
||
}
|
||
}, []);
|
||
|
||
// 开始流式分析图片
|
||
const startAnalysis = useCallback(async (uri: string) => {
|
||
if (isAnalyzing) return;
|
||
|
||
setIsAnalyzing(true);
|
||
|
||
// 延迟滚动到分析结果区域，给UI一些时间更新
|
||
setTimeout(() => {
|
||
scrollViewRef.current?.scrollTo({ y: 350, animated: true });
|
||
}, 300);
|
||
|
||
let isFirstChunk = true;
|
||
|
||
try {
|
||
await analyzeNutritionLabelStream(
|
||
{ imageUri: uri },
|
||
{
|
||
onChunk: (chunk: string) => {
|
||
// 流式分析暂时保留，但不再显示文本
|
||
console.log('[NUTRITION_ANALYSIS] Stream chunk:', chunk);
|
||
},
|
||
onEnd: () => {
|
||
setIsAnalyzing(false);
|
||
streamAbortRef.current = null;
|
||
console.log('[NUTRITION_ANALYSIS] Analysis completed');
|
||
},
|
||
onError: (error: any) => {
|
||
console.error('[NUTRITION_ANALYSIS] Analysis failed:', error);
|
||
setIsAnalyzing(false);
|
||
streamAbortRef.current = null;
|
||
|
||
// 如果是用户主动取消，不显示错误提示
|
||
if (error?.name !== 'AbortError' && !error?.message?.includes('abort')) {
|
||
Alert.alert('分析失败', '无法识别成分表，请尝试拍摄更清晰的照片');
|
||
}
|
||
}
|
||
}
|
||
);
|
||
} catch (error) {
|
||
console.error('[NUTRITION_ANALYSIS] Analysis error:', error);
|
||
setIsAnalyzing(false);
|
||
Alert.alert('分析失败', '无法识别成分表，请尝试拍摄更清晰的照片');
|
||
}
|
||
}, [isAnalyzing]);
|
||
|
||
// 新的分析函数：先上传图片到COS，然后调用新API
|
||
const startNewAnalysis = useCallback(async (uri: string) => {
|
||
if (isAnalyzing || isUploading) return;
|
||
|
||
setIsUploading(true);
|
||
setNewAnalysisResult(null);
|
||
|
||
// 延迟滚动到分析结果区域，给UI一些时间更新
|
||
setTimeout(() => {
|
||
scrollViewRef.current?.scrollTo({ y: 350, animated: true });
|
||
}, 300);
|
||
|
||
try {
|
||
// 第一步：上传图片到COS
|
||
console.log('[NUTRITION_ANALYSIS] 开始上传图片到COS...');
|
||
const uploadResult = await upload(uri);
|
||
console.log('[NUTRITION_ANALYSIS] 图片上传成功:', uploadResult.url);
|
||
|
||
setIsUploading(false);
|
||
setIsAnalyzing(true);
|
||
|
||
// 第二步：调用新的营养成分分析API
|
||
console.log('[NUTRITION_ANALYSIS] 开始调用营养成分分析API...');
|
||
const analysisResponse = await analyzeNutritionImage({
|
||
imageUrl: uploadResult.url
|
||
});
|
||
|
||
console.log('[NUTRITION_ANALYSIS] API响应:', analysisResponse);
|
||
|
||
if (analysisResponse.success && analysisResponse.data) {
|
||
// 直接使用服务端返回的数据，不做任何转换
|
||
setNewAnalysisResult(analysisResponse);
|
||
} else {
|
||
throw new Error(analysisResponse.message || '分析失败');
|
||
}
|
||
} catch (error: any) {
|
||
console.error('[NUTRITION_ANALYSIS] 新API分析失败:', error);
|
||
setIsUploading(false);
|
||
setIsAnalyzing(false);
|
||
|
||
// 显示错误提示
|
||
Alert.alert(
|
||
'分析失败',
|
||
error.message || '无法识别成分表，请尝试拍摄更清晰的照片'
|
||
);
|
||
} finally {
|
||
setIsUploading(false);
|
||
setIsAnalyzing(false);
|
||
}
|
||
}, [isAnalyzing, isUploading, upload]);
|
||
|
||
return (
|
||
<View style={styles.container}>
|
||
{/* 背景渐变 */}
|
||
<LinearGradient
|
||
colors={['#f5e5fbff', '#e5fcfeff', '#eefdffff', '#ffffffff']}
|
||
style={styles.gradientBackground}
|
||
start={{ x: 0, y: 0 }}
|
||
end={{ x: 0, y: 1 }}
|
||
/>
|
||
|
||
<HeaderBar
|
||
title="成分表分析"
|
||
onBack={() => router.back()}
|
||
transparent={true}
|
||
/>
|
||
|
||
<ScrollView
|
||
ref={scrollViewRef}
|
||
style={styles.scrollContainer}
|
||
contentContainerStyle={{
|
||
paddingTop: safeAreaTop
|
||
}}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
{/* 图片区域 */}
|
||
<View style={styles.imageContainer}>
|
||
{imageUri ? (
|
||
<View>
|
||
<TouchableOpacity
|
||
onPress={() => setShowImagePreview(true)}
|
||
activeOpacity={0.9}
|
||
>
|
||
<Image
|
||
source={{ uri: imageUri }}
|
||
style={styles.foodImage}
|
||
cachePolicy={'memory-disk'}
|
||
/>
|
||
{/* 预览提示图标 */}
|
||
<View style={styles.previewHint}>
|
||
<Ionicons name="expand-outline" size={20} color="#FFF" />
|
||
</View>
|
||
</TouchableOpacity>
|
||
|
||
{/* 开始分析按钮 */}
|
||
{!isAnalyzing && !isUploading && !newAnalysisResult && (
|
||
<TouchableOpacity
|
||
style={styles.analyzeButton}
|
||
onPress={() => startNewAnalysis(imageUri)}
|
||
activeOpacity={0.8}
|
||
>
|
||
<Ionicons name="search-outline" size={20} color="#FFF" />
|
||
<Text style={styles.analyzeButtonText}>开始分析</Text>
|
||
</TouchableOpacity>
|
||
)}
|
||
|
||
{/* 删除图片按钮 */}
|
||
<TouchableOpacity
|
||
style={styles.deleteImageButton}
|
||
onPress={() => {
|
||
setImageUri(null);
|
||
setNewAnalysisResult(null);
|
||
triggerLightHaptic();
|
||
}}
|
||
activeOpacity={0.8}
|
||
>
|
||
<Ionicons name="trash-outline" size={16} color="#FFF" />
|
||
</TouchableOpacity>
|
||
</View>
|
||
) : (
|
||
<View style={styles.placeholderContainer}>
|
||
<View style={styles.placeholderContent}>
|
||
<Ionicons name="document-text-outline" size={48} color="#666" />
|
||
<Text style={styles.placeholderText}>拍摄或选择成分表照片</Text>
|
||
</View>
|
||
{/* 操作按钮区域 */}
|
||
<View style={styles.imageActionButtonsContainer}>
|
||
<TouchableOpacity
|
||
style={styles.imageActionButton}
|
||
onPress={takePhoto}
|
||
activeOpacity={0.8}
|
||
>
|
||
<Ionicons name="camera-outline" size={20} color={Colors.light.onPrimary} />
|
||
<Text style={styles.imageActionButtonText}>拍摄</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity
|
||
style={[styles.imageActionButton, styles.imageActionButtonSecondary]}
|
||
onPress={pickImage}
|
||
activeOpacity={0.8}
|
||
>
|
||
<Ionicons name="image-outline" size={20} color={Colors.light.primary} />
|
||
<Text style={[styles.imageActionButtonText, { color: Colors.light.primary }]}>相册</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
|
||
|
||
{/* 新API营养成分详细分析结果 */}
|
||
{newAnalysisResult && newAnalysisResult.success && newAnalysisResult.data && (
|
||
<View style={styles.nutritionDetailsCard}>
|
||
<View style={styles.nutritionDetailsHeader}>
|
||
<Text style={styles.nutritionDetailsTitle}>营养成分详细分析</Text>
|
||
</View>
|
||
{newAnalysisResult.data.map((item, index) => (
|
||
<View key={item.key || index} style={styles.nutritionDetailItem}>
|
||
<View style={styles.nutritionDetailHeader}>
|
||
<Text style={styles.nutritionDetailName}>{item.name}</Text>
|
||
<Text style={styles.nutritionDetailValue}>{item.value}</Text>
|
||
</View>
|
||
<Text style={styles.nutritionDetailAnalysis}>{item.analysis}</Text>
|
||
</View>
|
||
))}
|
||
</View>
|
||
)}
|
||
|
||
{/* 上传状态 */}
|
||
{isUploading && (
|
||
<View style={styles.loadingContainer}>
|
||
<ActivityIndicator size="large" color={Colors.light.primary} />
|
||
<Text style={styles.loadingText}>
|
||
正在上传图片... {uploadProgress > 0 ? `${Math.round(uploadProgress)}%` : ''}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
|
||
{/* 加载状态 */}
|
||
{isAnalyzing && !newAnalysisResult && !isUploading && (
|
||
<View style={styles.loadingContainer}>
|
||
<ActivityIndicator size="large" color={Colors.light.primary} />
|
||
<Text style={styles.loadingText}>正在分析成分表...</Text>
|
||
</View>
|
||
)}
|
||
</ScrollView>
|
||
|
||
{/* 图片预览 */}
|
||
<ImageViewing
|
||
images={imageUri ? [{ uri: imageUri }] : []}
|
||
imageIndex={0}
|
||
visible={showImagePreview}
|
||
onRequestClose={() => setShowImagePreview(false)}
|
||
swipeToCloseEnabled={true}
|
||
doubleTapToZoomEnabled={true}
|
||
HeaderComponent={() => (
|
||
<View style={styles.imageViewerHeader}>
|
||
<Text style={styles.imageViewerHeaderText}>
|
||
{dayjs().format('YYYY年M月D日 HH:mm')}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
FooterComponent={() => (
|
||
<View style={styles.imageViewerFooter}>
|
||
<TouchableOpacity
|
||
style={styles.imageViewerFooterButton}
|
||
onPress={() => setShowImagePreview(false)}
|
||
>
|
||
<Text style={styles.imageViewerFooterButtonText}>关闭</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
)}
|
||
/>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#f5e5fbff',
|
||
},
|
||
gradientBackground: {
|
||
position: 'absolute',
|
||
left: 0,
|
||
right: 0,
|
||
top: 0,
|
||
bottom: 0,
|
||
},
|
||
scrollContainer: {
|
||
flex: 1,
|
||
},
|
||
imageContainer: {
|
||
position: 'relative',
|
||
height: 300,
|
||
marginHorizontal: 16,
|
||
marginTop: 16,
|
||
borderRadius: 20,
|
||
overflow: 'hidden',
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
foodImage: {
|
||
width: '100%',
|
||
height: '100%',
|
||
borderRadius: 20,
|
||
},
|
||
previewHint: {
|
||
position: 'absolute',
|
||
top: 16,
|
||
right: 16,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||
borderRadius: 20,
|
||
padding: 8,
|
||
},
|
||
deleteImageButton: {
|
||
position: 'absolute',
|
||
top: 16,
|
||
left: 16,
|
||
backgroundColor: 'rgba(255, 59, 48, 0.9)',
|
||
borderRadius: 20,
|
||
padding: 8,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.2,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
placeholderContainer: {
|
||
width: '100%',
|
||
height: '100%',
|
||
backgroundColor: '#F8F9FA',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
borderRadius: 20,
|
||
borderWidth: 2,
|
||
borderColor: '#E9ECEF',
|
||
borderStyle: 'dashed',
|
||
},
|
||
placeholderContent: {
|
||
alignItems: 'center',
|
||
marginBottom: 40,
|
||
},
|
||
placeholderText: {
|
||
fontSize: 16,
|
||
color: '#666',
|
||
fontWeight: '500',
|
||
marginTop: 8,
|
||
},
|
||
imageActionButtonsContainer: {
|
||
flexDirection: 'row',
|
||
gap: 12,
|
||
paddingHorizontal: 20,
|
||
},
|
||
imageActionButton: {
|
||
flex: 1,
|
||
backgroundColor: Colors.light.primary,
|
||
paddingVertical: 12,
|
||
paddingHorizontal: 16,
|
||
borderRadius: 16,
|
||
alignItems: 'center',
|
||
flexDirection: 'row',
|
||
justifyContent: 'center',
|
||
shadowColor: Colors.light.primary,
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.2,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
imageActionButtonSecondary: {
|
||
backgroundColor: 'transparent',
|
||
borderWidth: 1.5,
|
||
borderColor: Colors.light.primary,
|
||
shadowOpacity: 0,
|
||
elevation: 0,
|
||
},
|
||
imageActionButtonText: {
|
||
color: Colors.light.onPrimary,
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
marginLeft: 6,
|
||
},
|
||
resultCard: {
|
||
backgroundColor: Colors.light.background,
|
||
margin: 16,
|
||
borderRadius: 16,
|
||
padding: 20,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
resultHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 16,
|
||
},
|
||
resultTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '600',
|
||
color: Colors.light.text,
|
||
},
|
||
confidenceContainer: {
|
||
backgroundColor: '#E8F5E8',
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
borderRadius: 8,
|
||
},
|
||
confidenceText: {
|
||
fontSize: 12,
|
||
color: '#4CAF50',
|
||
fontWeight: '500',
|
||
},
|
||
foodInfoContainer: {
|
||
marginBottom: 12,
|
||
},
|
||
foodNameLabel: {
|
||
fontSize: 14,
|
||
color: Colors.light.textSecondary,
|
||
marginBottom: 4,
|
||
},
|
||
foodNameValue: {
|
||
fontSize: 16,
|
||
color: Colors.light.text,
|
||
fontWeight: '500',
|
||
},
|
||
nutritionGrid: {
|
||
flexDirection: 'row',
|
||
flexWrap: 'wrap',
|
||
marginTop: 8,
|
||
},
|
||
nutritionItem: {
|
||
width: '50%',
|
||
marginBottom: 12,
|
||
paddingRight: 8,
|
||
},
|
||
nutritionLabel: {
|
||
fontSize: 12,
|
||
color: Colors.light.textSecondary,
|
||
marginBottom: 2,
|
||
},
|
||
nutritionValue: {
|
||
fontSize: 16,
|
||
color: Colors.light.text,
|
||
fontWeight: '600',
|
||
},
|
||
loadingContainer: {
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
padding: 40,
|
||
},
|
||
loadingText: {
|
||
fontSize: 16,
|
||
color: Colors.light.textSecondary,
|
||
marginTop: 12,
|
||
},
|
||
// ImageViewing 组件样式
|
||
imageViewerHeader: {
|
||
position: 'absolute',
|
||
top: 60,
|
||
left: 20,
|
||
right: 20,
|
||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||
borderRadius: 12,
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
zIndex: 1,
|
||
},
|
||
imageViewerHeaderText: {
|
||
color: '#FFF',
|
||
fontSize: 14,
|
||
fontWeight: '500',
|
||
textAlign: 'center',
|
||
},
|
||
imageViewerFooter: {
|
||
position: 'absolute',
|
||
bottom: 60,
|
||
left: 20,
|
||
right: 20,
|
||
alignItems: 'center',
|
||
zIndex: 1,
|
||
},
|
||
imageViewerFooterButton: {
|
||
backgroundColor: 'rgba(0, 0, 0, 0.7)',
|
||
paddingHorizontal: 24,
|
||
paddingVertical: 12,
|
||
borderRadius: 20,
|
||
},
|
||
imageViewerFooterButtonText: {
|
||
color: '#FFF',
|
||
fontSize: 16,
|
||
fontWeight: '500',
|
||
},
|
||
// 开始分析按钮样式
|
||
analyzeButton: {
|
||
position: 'absolute',
|
||
bottom: 16,
|
||
right: 16,
|
||
backgroundColor: Colors.light.primary,
|
||
paddingHorizontal: 16,
|
||
paddingVertical: 12,
|
||
borderRadius: 20,
|
||
alignItems: 'center',
|
||
flexDirection: 'row',
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.2,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
analyzeButtonText: {
|
||
color: Colors.light.onPrimary,
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
marginLeft: 6,
|
||
},
|
||
// 营养成分详细分析卡片样式
|
||
nutritionDetailsCard: {
|
||
backgroundColor: Colors.light.background,
|
||
margin: 16,
|
||
borderRadius: 16,
|
||
padding: 20,
|
||
shadowColor: '#000',
|
||
shadowOffset: {
|
||
width: 0,
|
||
height: 2,
|
||
},
|
||
shadowOpacity: 0.1,
|
||
shadowRadius: 4,
|
||
elevation: 3,
|
||
},
|
||
nutritionDetailsHeader: {
|
||
marginBottom: 16,
|
||
},
|
||
nutritionDetailsTitle: {
|
||
fontSize: 18,
|
||
fontWeight: '600',
|
||
color: Colors.light.text,
|
||
},
|
||
nutritionDetailItem: {
|
||
marginBottom: 20,
|
||
paddingBottom: 16,
|
||
borderBottomWidth: 1,
|
||
borderBottomColor: '#F0F0F0',
|
||
},
|
||
nutritionDetailHeader: {
|
||
flexDirection: 'row',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: 8,
|
||
},
|
||
nutritionDetailName: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
color: Colors.light.text,
|
||
flex: 1,
|
||
},
|
||
nutritionDetailValue: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
color: Colors.light.primary,
|
||
backgroundColor: 'rgba(74, 144, 226, 0.1)',
|
||
paddingHorizontal: 8,
|
||
paddingVertical: 4,
|
||
borderRadius: 8,
|
||
},
|
||
nutritionDetailAnalysis: {
|
||
fontSize: 14,
|
||
lineHeight: 20,
|
||
color: Colors.light.textSecondary,
|
||
},
|
||
}); |