feat: 新增语音记录饮食功能与开发者调试模块
- 集成 @react-native-voice/voice 实现中文语音识别，支持“一句话记录”餐食 - 新增语音录制页面，含波形动画、音量反馈与识别结果确认 - FloatingFoodOverlay 新增语音入口，打通拍照/库/语音三种记录方式 - 添加麦克风与语音识别权限描述（iOS Info.plist 与 Android manifest） - 实现开发者模式：连续三次点击用户名激活，含日志查看、导出与清除 - 新增 logger 工具类，统一日志存储（AsyncStorage）与按级别输出 - 重构 BackgroundTaskManager 为单例并支持 Promise 初始化，避免重复注册 - 移除 sleep-detail 多余渐变背景，改用 ThemedView 统一主题 - 新增通用 haptic 反馈函数，支持多种震动类型（iOS only） - 升级 expo-background-task、expo-notifications、expo-task-manager 至兼容版本
This commit is contained in:
richarjiang
471
app/voice-record.tsx
Normal file
471
app/voice-record.tsx
Normal file
@@ -0,0 +1,471 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { useColorScheme } from '@/hooks/useColorScheme';
|
||||
import { triggerHapticFeedback } from '@/utils/haptics';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import Voice from '@react-native-voice/voice';
|
||||
import { BlurView } from 'expo-blur';
|
||||
import { router, useLocalSearchParams } from 'expo-router';
|
||||
import React, { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Animated,
|
||||
Dimensions,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View
|
||||
} from 'react-native';
|
||||
|
||||
const { width } = Dimensions.get('window');
|
||||
|
||||
type VoiceRecordState = 'idle' | 'listening' | 'processing' | 'result';
|
||||
|
||||
export default function VoiceRecordScreen() {
|
||||
const theme = useColorScheme() ?? 'light';
|
||||
const colorTokens = Colors[theme];
|
||||
const { mealType = 'dinner' } = useLocalSearchParams<{ mealType?: string }>();
|
||||
|
||||
// 状态管理
|
||||
const [recordState, setRecordState] = useState<VoiceRecordState>('idle');
|
||||
const [recognizedText, setRecognizedText] = useState('');
|
||||
const [isListening, setIsListening] = useState(false);
|
||||
|
||||
// 动画相关
|
||||
const scaleAnimation = useRef(new Animated.Value(1)).current;
|
||||
const pulseAnimation = useRef(new Animated.Value(1)).current;
|
||||
const waveAnimation = useRef(new Animated.Value(0)).current;
|
||||
|
||||
useEffect(() => {
|
||||
// 初始化语音识别
|
||||
Voice.onSpeechStart = onSpeechStart;
|
||||
Voice.onSpeechRecognized = onSpeechRecognized;
|
||||
Voice.onSpeechEnd = onSpeechEnd;
|
||||
Voice.onSpeechError = onSpeechError;
|
||||
Voice.onSpeechResults = onSpeechResults;
|
||||
Voice.onSpeechPartialResults = onSpeechPartialResults;
|
||||
Voice.onSpeechVolumeChanged = onSpeechVolumeChanged;
|
||||
|
||||
return () => {
|
||||
Voice.destroy().then(Voice.removeAllListeners);
|
||||
};
|
||||
}, []);
|
||||
|
||||
// 启动脉动动画
|
||||
const startPulseAnimation = () => {
|
||||
Animated.loop(
|
||||
Animated.sequence([
|
||||
Animated.timing(pulseAnimation, {
|
||||
toValue: 1.2,
|
||||
duration: 800,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
Animated.timing(pulseAnimation, {
|
||||
toValue: 1,
|
||||
duration: 800,
|
||||
useNativeDriver: true,
|
||||
}),
|
||||
])
|
||||
).start();
|
||||
};
|
||||
|
||||
// 启动波浪动画
|
||||
const startWaveAnimation = () => {
|
||||
Animated.loop(
|
||||
Animated.timing(waveAnimation, {
|
||||
toValue: 1,
|
||||
duration: 1500,
|
||||
useNativeDriver: false,
|
||||
})
|
||||
).start();
|
||||
};
|
||||
|
||||
// 停止所有动画
|
||||
const stopAnimations = () => {
|
||||
pulseAnimation.stopAnimation();
|
||||
waveAnimation.stopAnimation();
|
||||
scaleAnimation.setValue(1);
|
||||
pulseAnimation.setValue(1);
|
||||
waveAnimation.setValue(0);
|
||||
};
|
||||
|
||||
// 语音识别回调
|
||||
const onSpeechStart = () => {
|
||||
setIsListening(true);
|
||||
setRecordState('listening');
|
||||
startPulseAnimation();
|
||||
startWaveAnimation();
|
||||
};
|
||||
|
||||
const onSpeechRecognized = () => {
|
||||
console.log('语音识别中...');
|
||||
};
|
||||
|
||||
const onSpeechEnd = () => {
|
||||
setIsListening(false);
|
||||
setRecordState('processing');
|
||||
stopAnimations();
|
||||
};
|
||||
|
||||
const onSpeechError = (error: any) => {
|
||||
console.log('语音识别错误:', error);
|
||||
setIsListening(false);
|
||||
setRecordState('idle');
|
||||
stopAnimations();
|
||||
Alert.alert('录音失败', '请检查麦克风权限或稍后重试');
|
||||
};
|
||||
|
||||
const onSpeechResults = (event: any) => {
|
||||
const text = event.value?.[0] || '';
|
||||
setRecognizedText(text);
|
||||
setRecordState('result');
|
||||
stopAnimations();
|
||||
};
|
||||
|
||||
const onSpeechPartialResults = (event: any) => {
|
||||
const text = event.value?.[0] || '';
|
||||
setRecognizedText(text);
|
||||
};
|
||||
|
||||
const onSpeechVolumeChanged = (event: any) => {
|
||||
// 根据音量调整动画
|
||||
const volume = event.value || 0;
|
||||
const scale = 1 + (volume * 0.1);
|
||||
scaleAnimation.setValue(Math.min(scale, 1.5));
|
||||
};
|
||||
|
||||
// 开始录音
|
||||
const startRecording = async () => {
|
||||
try {
|
||||
setRecognizedText('');
|
||||
setRecordState('idle');
|
||||
triggerHapticFeedback('impactMedium');
|
||||
|
||||
await Voice.start('zh-CN'); // 设置为中文识别
|
||||
} catch (error) {
|
||||
console.log('启动语音识别失败:', error);
|
||||
Alert.alert('录音失败', '无法启动语音识别，请检查权限设置');
|
||||
}
|
||||
};
|
||||
|
||||
// 停止录音
|
||||
const stopRecording = async () => {
|
||||
try {
|
||||
await Voice.stop();
|
||||
triggerHapticFeedback('impactLight');
|
||||
} catch (error) {
|
||||
console.log('停止语音识别失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 重新录音
|
||||
const retryRecording = () => {
|
||||
setRecognizedText('');
|
||||
setRecordState('idle');
|
||||
startRecording();
|
||||
};
|
||||
|
||||
// 确认并返回结果
|
||||
const confirmResult = () => {
|
||||
triggerHapticFeedback('impactMedium');
|
||||
// TODO: 处理识别结果，可以传递给食物分析页面
|
||||
router.back();
|
||||
};
|
||||
|
||||
const handleBack = () => {
|
||||
if (isListening) {
|
||||
stopRecording();
|
||||
}
|
||||
router.back();
|
||||
};
|
||||
|
||||
// 获取状态对应的UI文本
|
||||
const getStatusText = () => {
|
||||
switch (recordState) {
|
||||
case 'idle':
|
||||
return '点击开始录音';
|
||||
case 'listening':
|
||||
return '正在聆听...';
|
||||
case 'processing':
|
||||
return 'AI处理中...';
|
||||
case 'result':
|
||||
return '识别完成';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
// 获取主按钮配置
|
||||
const getMainButtonConfig = () => {
|
||||
switch (recordState) {
|
||||
case 'idle':
|
||||
return {
|
||||
onPress: startRecording,
|
||||
color: '#7B68EE',
|
||||
icon: 'mic',
|
||||
size: 80,
|
||||
};
|
||||
case 'listening':
|
||||
return {
|
||||
onPress: stopRecording,
|
||||
color: '#FF6B6B',
|
||||
icon: 'stop',
|
||||
size: 80,
|
||||
};
|
||||
case 'processing':
|
||||
return {
|
||||
onPress: () => { },
|
||||
color: '#FFA07A',
|
||||
icon: 'hourglass',
|
||||
size: 80,
|
||||
};
|
||||
case 'result':
|
||||
return {
|
||||
onPress: confirmResult,
|
||||
color: '#4ECDC4',
|
||||
icon: 'checkmark',
|
||||
size: 80,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const buttonConfig = getMainButtonConfig();
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: colorTokens.background }]}>
|
||||
<HeaderBar
|
||||
title="一句话记录"
|
||||
onBack={handleBack}
|
||||
tone={theme}
|
||||
variant="elevated"
|
||||
/>
|
||||
|
||||
<View style={styles.content}>
|
||||
{/* 录音动画区域 */}
|
||||
<View style={styles.animationContainer}>
|
||||
{/* 背景波浪效果 */}
|
||||
{recordState === 'listening' && (
|
||||
<>
|
||||
{[1, 2, 3].map((index) => (
|
||||
<Animated.View
|
||||
key={index}
|
||||
style={[
|
||||
styles.waveRing,
|
||||
{
|
||||
transform: [
|
||||
{
|
||||
scale: waveAnimation.interpolate({
|
||||
inputRange: [0, 1],
|
||||
outputRange: [0.8, 2 + index * 0.3],
|
||||
}),
|
||||
},
|
||||
],
|
||||
opacity: waveAnimation.interpolate({
|
||||
inputRange: [0, 0.5, 1],
|
||||
outputRange: [0.6, 0.3, 0],
|
||||
}),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 主录音按钮 */}
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.recordButton,
|
||||
{
|
||||
backgroundColor: buttonConfig.color,
|
||||
transform: [
|
||||
{ scale: scaleAnimation },
|
||||
{ scale: pulseAnimation },
|
||||
],
|
||||
},
|
||||
]}
|
||||
>
|
||||
<TouchableOpacity
|
||||
style={styles.recordButtonInner}
|
||||
onPress={buttonConfig.onPress}
|
||||
activeOpacity={0.8}
|
||||
disabled={recordState === 'processing'}
|
||||
>
|
||||
<Ionicons
|
||||
name={buttonConfig.icon as any}
|
||||
size={buttonConfig.size}
|
||||
color="white"
|
||||
/>
|
||||
</TouchableOpacity>
|
||||
</Animated.View>
|
||||
</View>
|
||||
|
||||
{/* 状态文本 */}
|
||||
<View style={styles.statusContainer}>
|
||||
<Text style={[styles.statusText, { color: colorTokens.text }]}>
|
||||
{getStatusText()}
|
||||
</Text>
|
||||
|
||||
{recordState === 'listening' && (
|
||||
<Text style={[styles.hintText, { color: colorTokens.textSecondary }]}>
|
||||
说出您想记录的食物内容
|
||||
</Text>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* 识别结果 */}
|
||||
{recognizedText && (
|
||||
<BlurView intensity={20} tint={theme} style={styles.resultContainer}>
|
||||
<View style={styles.resultContent}>
|
||||
<Text style={[styles.resultLabel, { color: colorTokens.textSecondary }]}>
|
||||
识别结果:
|
||||
</Text>
|
||||
<Text style={[styles.resultText, { color: colorTokens.text }]}>
|
||||
{recognizedText}
|
||||
</Text>
|
||||
|
||||
{recordState === 'result' && (
|
||||
<View style={styles.resultActions}>
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.retryButton]}
|
||||
onPress={retryRecording}
|
||||
>
|
||||
<Ionicons name="refresh" size={16} color="#7B68EE" />
|
||||
<Text style={styles.retryButtonText}>重新录音</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<TouchableOpacity
|
||||
style={[styles.actionButton, styles.confirmButton]}
|
||||
onPress={confirmResult}
|
||||
>
|
||||
<Ionicons name="checkmark" size={16} color="white" />
|
||||
<Text style={styles.confirmButtonText}>确认使用</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</BlurView>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
},
|
||||
content: {
|
||||
flex: 1,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
animationContainer: {
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 40,
|
||||
height: 200,
|
||||
width: 200,
|
||||
},
|
||||
waveRing: {
|
||||
position: 'absolute',
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: 80,
|
||||
backgroundColor: 'rgba(123, 104, 238, 0.1)',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(123, 104, 238, 0.2)',
|
||||
},
|
||||
recordButton: {
|
||||
width: 160,
|
||||
height: 160,
|
||||
borderRadius: 80,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#000',
|
||||
shadowOffset: {
|
||||
width: 0,
|
||||
height: 8,
|
||||
},
|
||||
shadowOpacity: 0.3,
|
||||
shadowRadius: 12,
|
||||
elevation: 12,
|
||||
},
|
||||
recordButtonInner: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 80,
|
||||
},
|
||||
statusContainer: {
|
||||
alignItems: 'center',
|
||||
marginBottom: 30,
|
||||
},
|
||||
statusText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
marginBottom: 8,
|
||||
},
|
||||
hintText: {
|
||||
fontSize: 14,
|
||||
textAlign: 'center',
|
||||
lineHeight: 20,
|
||||
},
|
||||
resultContainer: {
|
||||
position: 'absolute',
|
||||
bottom: 100,
|
||||
left: 20,
|
||||
right: 20,
|
||||
borderRadius: 16,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
resultContent: {
|
||||
padding: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
borderRadius: 16,
|
||||
},
|
||||
resultLabel: {
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
marginBottom: 8,
|
||||
},
|
||||
resultText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
lineHeight: 24,
|
||||
marginBottom: 16,
|
||||
},
|
||||
resultActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 12,
|
||||
},
|
||||
actionButton: {
|
||||
flex: 1,
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
paddingVertical: 12,
|
||||
paddingHorizontal: 16,
|
||||
borderRadius: 12,
|
||||
gap: 6,
|
||||
},
|
||||
retryButton: {
|
||||
backgroundColor: 'rgba(123, 104, 238, 0.1)',
|
||||
borderWidth: 1,
|
||||
borderColor: '#7B68EE',
|
||||
},
|
||||
confirmButton: {
|
||||
backgroundColor: '#7B68EE',
|
||||
},
|
||||
retryButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
color: '#7B68EE',
|
||||
},
|
||||
confirmButtonText: {
|
||||
fontSize: 14,
|
||||
fontWeight: '500',
|
||||
color: 'white',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user