Блог

Функция интерполяции из анимированного возврата не является функцией

Я слежу за этим, но в настоящее время я делаю это как функциональный компонент (глава : «Разработка движения карточек Tinder»): https://www.instamobile.io/react-native-controls/react-native-swipe-cards-tinder/

Я не понимаю, почему интерполяция возврата «не является функцией». Я потратил на это много времени и ничего не нашел.

Есть компонент карты, который я написал :

 import React, { useState, useEffect } from 'react'
import { Text, View, Animated, Image, StyleSheet, PanResponder } from 'react-native'

function Card(props){
    const { screen_height, screen_width, image, Data, currentIndex, Index } = props;

    const [pan, setPan] = useState(new Animated.ValueXY());

    const [panResponder, setPanResponder] = useState(PanResponder.create({
        onStartShouldSetPanResponder: (evt, gestureState) => true,
        onPanResponderMove: (evt, gestureState) => {
            setPan({ x: gestureState.dx, y: gestureState.dy });
        },
        onPanResponderRelease: (evt, gestureState) => {
        }
    }));

    let value = Math.round(pan.x);

    if(value !== NaN || value !== undefined){
        console.log(value.interpolate({ inputRange: [0, 1], outputRange: [150, 0]}));
    }

    if (Index < currentIndex) { return null }
    else if(Index == currentIndex){
        return(
        <Animated.View style={[{ transform:[{ translateX: pan.x }, { translateY: pan.y }] },{ height:screen_height - 120, width:screen_width, padding:10, position:'absolute' }]} {...panResponder.panHandlers}>
            <Image style={[{
                flex:1,
                height:null,
                width:null,
                resizeMode:"cover",
                borderRadius:20,
                }]} source={image.uri}/>
        </Animated.View>)
    } else {
        return(
        <Animated.View style={[{ height:screen_height - 120, width:screen_width, padding:10, position:'absolute' }]}>
            <Image style={[{
                flex:1,
                height:null,
                width:null,
                resizeMode:"cover",
                borderRadius:20,
                }]} source={image.uri}/>
        </Animated.View>)
    }
}

export default Card;
 

сетПан неправильно используется.пан теперь объект, а не анимированный.Больше значения.Вместо этого вы должны вызвать setValue или использовать Animated.event для анимированного значения.

 onPanResponderMove: Animated.event([
      null,
      {
        dx: pan.x, // x,y are Animated.Value
        dy: pan.y,
      },
    ]),