插值不是函数

Question

动画中的插值函数return不是函数

我正在关注这个，但我目前正在将其作为功能组件来做（章节：“设计 Tinder 卡片运动”）： https://www.instamobile.io/react-native-controls/react-native-swipe-cards-tinder/

我不明白为什么 interpolate return “不是函数”。我花了很多时间在上面，但我没有找到任何东西。

有我写的卡片组件:

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;

Answer 1

setPan用错了pan 现在是一个对象，不再是 Animated.Value。You should call setValue or using Animated.event on the animated value Instead.

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

插值不是函数

interpolate is not a function

animation

react-native