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-07-30 16:16:16 +08:00
parent 8969e45d6b
commit e74622b009
2 changed files with 54 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
components/ask/selectModel.tsx
View File

@ -4,6 +4,7 @@ import YesSvg from "@/assets/icons/svg/yes.svg";
import { TFunction } from "i18next";
import React from "react";
import { FlatList, Image, Modal, StyleSheet, TouchableOpacity, View } from "react-native";
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import { ThemedText } from "../ThemedText";
import { mergeArrays } from "./utils";
@ -16,7 +17,11 @@ interface SelectModelProps {
t: TFunction;
}
const SelectModel = ({ modalDetailsVisible, setModalDetailsVisible, insets, setSelectedImages, selectedImages, t }: SelectModelProps) => {
const longPressGesture = Gesture.LongPress().onEnd((e, success) => {
if (success) {
console.log(`Long pressed for ${e.duration} ms!`);
}
});
return (
<Modal
animationType="fade"
@ -63,32 +68,34 @@ const SelectModel = ({ modalDetailsVisible, setModalDetailsVisible, insets, setS
style={detailsStyles.gridItemContainer}
key={item.id}
>
<View style={detailsStyles.gridItem}>
<ThemedText style={detailsStyles.imageNumber}>
{selectedImages?.map((image, index) => {
if (image === item.id || image === item.video?.id) {
return index + 1
}
})}
</ThemedText>
<Image
source={{ uri: item?.preview_file_info?.url || item.video?.preview_file_info?.url }}
style={detailsStyles.image}
onError={(error) => console.log('Image load error:', error.nativeEvent.error)}
onLoad={() => console.log('Image loaded successfully')}
loadingIndicatorSource={require('@/assets/images/png/placeholder.png')}
/>
<TouchableOpacity
style={[
detailsStyles.circleMarker,
isSelected && detailsStyles.circleMarkerSelected
]}
onPress={toggleSelection}
activeOpacity={0.8}
>
{isSelected && <YesSvg width={16} height={16} />}
</TouchableOpacity>
</View>
<GestureDetector gesture={longPressGesture}>
<View style={detailsStyles.gridItem}>
<ThemedText style={detailsStyles.imageNumber}>
{selectedImages?.map((image, index) => {
if (image === item.id || image === item.video?.id) {
return index + 1
}
})}
</ThemedText>
<Image
source={{ uri: item?.preview_file_info?.url || item.video?.preview_file_info?.url }}
style={detailsStyles.image}
onError={(error) => console.log('Image load error:', error.nativeEvent.error)}
onLoad={() => console.log('Image loaded successfully')}
loadingIndicatorSource={require('@/assets/images/png/placeholder.png')}
/>
<TouchableOpacity
style={[
detailsStyles.circleMarker,
isSelected && detailsStyles.circleMarkerSelected
]}
onPress={toggleSelection}
activeOpacity={0.8}
>
{isSelected && <YesSvg width={16} height={16} />}
</TouchableOpacity>
</View>
</GestureDetector>
</TouchableOpacity>
);
}}

39
provider.tsx
View File

@ -1,6 +1,7 @@
import { I18nextProvider } from "react-i18next";
import { Platform } from 'react-native';
import { GestureHandlerRootView } from "react-native-gesture-handler";
import Toast, { BaseToast, ErrorToast, ToastConfig } from 'react-native-toast-message';
import { Provider as ReduxProvider } from "react-redux";
import { AuthProvider } from "./contexts/auth-context";
@ -70,24 +71,24 @@ const toastConfig: ToastConfig = {
export function Provider({ children }: { children: React.ReactNode }) {
return (
<I18nextProvider i18n={i18n}>
<LanguageProvider>
<ReduxProvider store={store}>
<AuthProvider>
{children}
<Toast
config={toastConfig}
position={Platform.OS === 'web' ? 'top' : 'bottom'}
topOffset={Platform.OS === 'web' ? 20 : undefined}
bottomOffset={Platform.OS === 'web' ? undefined : 40}
visibilityTime={3000}
autoHide
/>
</AuthProvider>
</ReduxProvider>
</LanguageProvider>
</I18nextProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<I18nextProvider i18n={i18n}>
<LanguageProvider>
<ReduxProvider store={store}>
<AuthProvider>
{children}
<Toast
config={toastConfig}
position={Platform.OS === 'web' ? 'top' : 'bottom'}
topOffset={Platform.OS === 'web' ? 20 : undefined}
bottomOffset={Platform.OS === 'web' ? undefined : 40}
visibilityTime={3000}
autoHide
/>
</AuthProvider>
</ReduxProvider>
</LanguageProvider>
</I18nextProvider>
</GestureHandlerRootView>
);
}