feat: 引入手势组件
This commit is contained in:
parent
8969e45d6b
commit
e74622b009
@ -4,6 +4,7 @@ import YesSvg from "@/assets/icons/svg/yes.svg";
|
|||||||
import { TFunction } from "i18next";
|
import { TFunction } from "i18next";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { FlatList, Image, Modal, StyleSheet, TouchableOpacity, View } from "react-native";
|
import { FlatList, Image, Modal, StyleSheet, TouchableOpacity, View } from "react-native";
|
||||||
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
||||||
import { ThemedText } from "../ThemedText";
|
import { ThemedText } from "../ThemedText";
|
||||||
import { mergeArrays } from "./utils";
|
import { mergeArrays } from "./utils";
|
||||||
|
|
||||||
@ -16,7 +17,11 @@ interface SelectModelProps {
|
|||||||
t: TFunction;
|
t: TFunction;
|
||||||
}
|
}
|
||||||
const SelectModel = ({ modalDetailsVisible, setModalDetailsVisible, insets, setSelectedImages, selectedImages, t }: SelectModelProps) => {
|
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 (
|
return (
|
||||||
<Modal
|
<Modal
|
||||||
animationType="fade"
|
animationType="fade"
|
||||||
@ -63,6 +68,7 @@ const SelectModel = ({ modalDetailsVisible, setModalDetailsVisible, insets, setS
|
|||||||
style={detailsStyles.gridItemContainer}
|
style={detailsStyles.gridItemContainer}
|
||||||
key={item.id}
|
key={item.id}
|
||||||
>
|
>
|
||||||
|
<GestureDetector gesture={longPressGesture}>
|
||||||
<View style={detailsStyles.gridItem}>
|
<View style={detailsStyles.gridItem}>
|
||||||
<ThemedText style={detailsStyles.imageNumber}>
|
<ThemedText style={detailsStyles.imageNumber}>
|
||||||
{selectedImages?.map((image, index) => {
|
{selectedImages?.map((image, index) => {
|
||||||
@ -89,6 +95,7 @@ const SelectModel = ({ modalDetailsVisible, setModalDetailsVisible, insets, setS
|
|||||||
{isSelected && <YesSvg width={16} height={16} />}
|
{isSelected && <YesSvg width={16} height={16} />}
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
|
</GestureDetector>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
|
|
||||||
import { I18nextProvider } from "react-i18next";
|
import { I18nextProvider } from "react-i18next";
|
||||||
import { Platform } from 'react-native';
|
import { Platform } from 'react-native';
|
||||||
|
import { GestureHandlerRootView } from "react-native-gesture-handler";
|
||||||
import Toast, { BaseToast, ErrorToast, ToastConfig } from 'react-native-toast-message';
|
import Toast, { BaseToast, ErrorToast, ToastConfig } from 'react-native-toast-message';
|
||||||
import { Provider as ReduxProvider } from "react-redux";
|
import { Provider as ReduxProvider } from "react-redux";
|
||||||
import { AuthProvider } from "./contexts/auth-context";
|
import { AuthProvider } from "./contexts/auth-context";
|
||||||
@ -70,7 +71,7 @@ const toastConfig: ToastConfig = {
|
|||||||
|
|
||||||
export function Provider({ children }: { children: React.ReactNode }) {
|
export function Provider({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||||
<I18nextProvider i18n={i18n}>
|
<I18nextProvider i18n={i18n}>
|
||||||
<LanguageProvider>
|
<LanguageProvider>
|
||||||
<ReduxProvider store={store}>
|
<ReduxProvider store={store}>
|
||||||
@ -88,6 +89,6 @@ export function Provider({ children }: { children: React.ReactNode }) {
|
|||||||
</ReduxProvider>
|
</ReduxProvider>
|
||||||
</LanguageProvider>
|
</LanguageProvider>
|
||||||
</I18nextProvider>
|
</I18nextProvider>
|
||||||
|
</GestureHandlerRootView>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user