React Native Reanimated Card Swiper: выходная карта вспыхивает перед Unmount ⇐ Android

[Anonymous]

Im реализует Swiper Card Tinder с использованием Native Reanimated и Gesture Handler (с Expo). Основная логика функционирует правильно: при прохождении по карте мимо порога она оживляет экрана. Запись экрана < /p>
Вот код моего компонента: < /p>

Код: Выделить всё

import { View, Image, StyleSheet, Dimensions, TouchableOpacity } from 'react-native';
import { useState, useEffect, useMemo, useCallback } from 'react';
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withSpring, runOnJS, interpolate, withTiming, FadeOut } from 'react-native-reanimated';

const { width, height } = Dimensions.get('window');

type Props = {
imageUris: string[],
onSwipeRight: () => void,
onSwipeLeft: () => void,
};

export default function ImageSwiper({ imageUris, onSwipeRight, onSwipeLeft }: Props) {
const [index, setIndex] = useState(0)
const translateX = useSharedValue(0);
const rotate = useSharedValue(0);
// const opacity = useSharedValue(1);

const cards = useMemo(() => {
if (imageUris.length === 0) return [];
if (imageUris.length === 1) return [imageUris[0]];
return [imageUris[index], imageUris[(index + 1) % imageUris.length]];
}, [index, imageUris.length]);

const handleSwipe = useCallback((direction: 'left' | 'right') => {
if (direction === 'right') onSwipeRight();
else onSwipeLeft();

setIndex((prev) => (prev + 1) % imageUris.length);
translateX.value = withTiming(0, { duration: 0 });
rotate.value = withTiming(0, { duration: 0 });
// opacity.value = 1;
}, [onSwipeRight, onSwipeLeft, imageUris.length]);

const pan = Gesture.Pan()
.onUpdate((e) => {
translateX.value = e.translationX;
rotate.value = interpolate(translateX.value, [-width / 2, 0, width / 2], [-15, 0, 15]);
// opacity.value = interpolate(Math.abs(translateX.value), [0, width / 2], [1, 0]);
})
.onEnd((e) => {
if (Math.abs(e.translationX) > 150 || e.velocityX > 800) {
const right = e.translationX > 0;
// opacity.value = withTiming(0, {})
translateX.value = withTiming(right ? width : -width, { duration: 300 }, (finished) => {
if (finished) {
runOnJS(handleSwipe)(right ? 'right' : 'left')
console.log('swiped', right ? 'right' : 'left');
}
})
}
else {
translateX.value = withSpring(0);
rotate.value = withSpring(0);
// opacity.value = withSpring(1);
}
})

const animatedStyle = useAnimatedStyle(() => ({
transform: [
{ translateX: translateX.value },
{ rotate: `${rotate.value}deg` },
],
// opacity: opacity.value,
}));

return (


{cards.map((uri, i) => {
const isTop = i === 0;
const zIndex = 1 - i;

const CardComponent = (



);

return isTop ? (

{CardComponent}

) : CardComponent;
})}


)
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
card: {
position: 'absolute',
width: width * 0.7,
height: height * 0.4,
overflow: 'visible',
shadowColor: "#000",
shadowOffset: { width: 0, height: 5 },
shadowOpacity: 0.36,
shadowRadius: 6.68,
elevation: 11,
},
});
< /code>
Я подозреваю, что это может иметь какое -то отношение к < /p>
translateX.value = 0

В функции handleswipe (). Но пробовать разные подходы, такие как < /p>

Код: Выделить всё

translateX.value = withTiming(0, { duration: 0 })

не привел меня нигде
Я также пытался использовать непрозрачность, чтобы сделать карту невидимой в течение короткого времени после ее анимации, которая не дала желаемого результата

Подробнее здесь: https://stackoverflow.com/questions/797 ... re-unmount