undefined не является объектом (оценка 'output.length')
Я новичок в реактивной анимации, и теперь я получаю сообщение об ошибке при попытке использовать интерполяцию из реанимированной реактивной анимации. Я хочу удалить элемент после слайда, но перед выполнением кода он показывает эту ошибку. Я видел несколько руководств по этому вопросу, но я ничего не могу получить от него. Я смог взглянуть на документы , и я делаю все правильно. Я не знаю, где моя ошибка. Пожалуйста, взгляните:
const step = 1 / (cards.length - 1);
const OutfitIdeas = ({ navigation }) =\> {
const [currentIndex, setCurrentIndex] = useState(0);
const aIndex = useTransition(currentIndex);
return(
<View style={{flex: 1, backgroundColor: 'white'}}>
<Header
leftIcon={icons.menu}
leftOnPress={() => navigation.openDrawer()}
title="Outfit Ideas"
rightIcon={icons.bag}
rightOnPress={() => alert("Hello")}
\>
<View style={{flex: 1}}>
{{cards.map(({index}) => index >= currentIndex && (
<Card
key={index}
position = {index.interpolate({
inputRange: [aIndex, cards.length - 1],
outputRange: [0, 1],
})}
onSwipe={() => setCurrentIndex((prev) => prev + 1)}
\>
))
}}
</View>
<View>
)
}
export default OutfitIdeas;
import React from 'react';
import { View, Text, StyleSheet, Dimensions } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated, { add, Extrapolate, interpolate } from 'react-native-reanimated';
import { mixColor, mix, usePanGestureHandler } from 'react-native-redash/lib/module/v1';
import { useSpring } from '../screens/AuthScreens/useSpring';
const {width: wWidth} = Dimensions.get("window");
const width = wWidth * 0.75;
const height = width * (425 / 294)
const borderRadius = 24;
const Card = ({position, onSnap, source, step}) => {
const {gestureHandler, translation, velocity, state} = usePanGestureHandler();
const backgroundColor = mixColor(position, "#C9E9E7", "#74BCB8")
const translateYOffset = mix(position, 0, -50)
const scale = mix(position, 1, 0.9)
const imageScale = interpolate(step, {
inputRange: [0, step],
outputRange: [1, 0.8],
extraploate: Extrapolate.CLAMP
});
// const imageScale = mix(position, 1, 0.5);
const translateX = useSpring({
value: translation.x,
velocity: velocity.x,
state,
snapPoints: [-wWidth, 0, wWidth],
onSnap: ([x]) => x !== 0 && onSnap(),
});
const translateY = add(
translateYOffset,
useSpring({
value: translation.y,
velocity: velocity.y,
state,
snapPoints: [0]
})
);
return(
<View style={[{justifyContent: 'center', alignItems: 'center'}, StyleSheet.absoluteFill]}>
<PanGestureHandler {...gestureHandler}>
<Animated.View
style={{
backgroundColor: backgroundColor,
width,
height,
borderRadius,
transform: [{translateY}, {translateX}, {scale}],
overflow: 'hidden'
}}
>
<Animated.Image
{...{source}}
style={{
...StyleSheet.absoluteFillObject,
width: undefined,
height: undefined,
transform: [{scale: imageScale}]
}}
/>
</Animated.View>
</PanGestureHandler>
</View>
)
}
export default Card;
Я пытаюсь анимировать, но получаю указанную выше ошибку. Я хочу удалить элемент после его перемещения Если у кого-то есть решение, пожалуйста, помогите