FairClip/memowake-front
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 右滑

Browse Source
This commit is contained in:
jinyaqiu 2025-08-04 20:14:43 +08:00
parent fab73d196f
commit 6e8113e109
1 changed files with 101 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
app/(tabs)/ask.tsx
View File

@ -20,6 +20,8 @@ import {
TouchableOpacity, TouchableOpacity,
View View
} from 'react-native'; } from 'react-native';
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import { runOnJS } from 'react-native-reanimated';
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function AskScreen() { export default function AskScreen() {
@ -46,6 +48,25 @@ export default function AskScreen() {
} }
}, []); }, []);
const updateState = (value: string) => {
console.log('Received in JS:', value);
// 更新 React 状态或路由
router.replace(value);
};
// 右滑
const gesture = Gesture.Pan()
.onEnd((event) => {
const { translationX } = event;
const threshold = 100; // 滑动阈值
if (translationX > threshold) {
// 从左向右滑动，跳转页面
runOnJS(router.replace)("memo-list");
}
})
.minPointers(1)
.activeOffsetX([-10, 10]); // 在 X 方向触发的范围
useEffect(() => { useEffect(() => {
if (!isHello && userMessages.length > 0) { if (!isHello && userMessages.length > 0) {
scrollToEnd(); scrollToEnd();
@ -236,86 +257,88 @@ export default function AskScreen() {
); );
return ( return (
<View style={[styles.container, { paddingTop: insets.top }]}> <GestureDetector gesture={gesture}>
{/* 导航栏 */} <View style={[styles.container, { paddingTop: insets.top }]}>
<View style={[styles.navbar, isHello && styles.hiddenNavbar]}> {/* 导航栏 */}
<TouchableOpacity <View style={[styles.navbar, isHello && styles.hiddenNavbar]}>
style={styles.backButton} <TouchableOpacity
onPress={() => { style={styles.backButton}
try { onPress={() => {
if (TextInput.State?.currentlyFocusedInput) { try {
const input = TextInput.State.currentlyFocusedInput(); if (TextInput.State?.currentlyFocusedInput) {
if (input) input.blur(); const input = TextInput.State.currentlyFocusedInput();
if (input) input.blur();
}
} catch (error) {
console.log('失去焦点失败:', error);
} }
} catch (error) { Keyboard.dismiss();
console.log('失去焦点失败:', error); router.push('/memo-list');
} }}
Keyboard.dismiss(); >
router.push('/memo-list'); <ReturnArrow />
}} </TouchableOpacity>
> <ThemedText style={styles.title} onPress={() => { router.push('/owner') }}>MemoWake</ThemedText>
<ReturnArrow /> <View style={styles.placeholder} />
</TouchableOpacity>
<ThemedText style={styles.title} onPress={() => { router.push('/owner') }}>MemoWake</ThemedText>
<View style={styles.placeholder} />
</View>
<View style={styles.contentContainer}>
{/* 欢迎页面 */}
<Animated.View
style={[
styles.absoluteView,
{
opacity: fadeAnim,
pointerEvents: isHello ? 'auto' : 'none',
zIndex: 1
}
]}
>
<AskHello setUserMessages={setUserMessages} setConversationId={setConversationId} setIsHello={setIsHello} />
</Animated.View>
{/* 聊天页面 */}
<Animated.View
style={[
styles.absoluteView,
{
opacity: fadeAnimChat,
pointerEvents: isHello ? 'none' : 'auto',
zIndex: 0
}
]}
>
<Chat
ref={chatListRef}
userMessages={userMessages}
sessionId={sessionId}
setSelectedImages={setSelectedImages}
selectedImages={selectedImages}
style={styles.chatContainer}
contentContainerStyle={styles.chatContentContainer}
showsVerticalScrollIndicator={false}
onContentSizeChange={() => scrollToEnd()}
/>
</Animated.View>
</View>
{/* 输入框区域 */}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={0} >
<View style={styles.inputContainer} key={conversationId}>
<SendMessage
setIsHello={setIsHello}
conversationId={conversationId}
setConversationId={setConversationId}
setUserMessages={setUserMessages}
selectedImages={selectedImages}
setSelectedImages={setSelectedImages}
/>
</View> </View>
</KeyboardAvoidingView>
</View > <View style={styles.contentContainer}>
{/* 欢迎页面 */}
<Animated.View
style={[
styles.absoluteView,
{
opacity: fadeAnim,
pointerEvents: isHello ? 'auto' : 'none',
zIndex: 1
}
]}
>
<AskHello setUserMessages={setUserMessages} setConversationId={setConversationId} setIsHello={setIsHello} />
</Animated.View>
{/* 聊天页面 */}
<Animated.View
style={[
styles.absoluteView,
{
opacity: fadeAnimChat,
pointerEvents: isHello ? 'none' : 'auto',
zIndex: 0
}
]}
>
<Chat
ref={chatListRef}
userMessages={userMessages}
sessionId={sessionId}
setSelectedImages={setSelectedImages}
selectedImages={selectedImages}
style={styles.chatContainer}
contentContainerStyle={styles.chatContentContainer}
showsVerticalScrollIndicator={false}
onContentSizeChange={() => scrollToEnd()}
/>
</Animated.View>
</View>
{/* 输入框区域 */}
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "height"}
keyboardVerticalOffset={0} >
<View style={styles.inputContainer} key={conversationId}>
<SendMessage
setIsHello={setIsHello}
conversationId={conversationId}
setConversationId={setConversationId}
setUserMessages={setUserMessages}
selectedImages={selectedImages}
setSelectedImages={setSelectedImages}
/>
</View>
</KeyboardAvoidingView>
</View >
</GestureDetector>
); );
} }