State 似乎没有在 Animated.spring() 中更新

Question

我正在尝试使用功能组件制作类似滑动功能的火种。

我基本上制作了以下教程的功能版本

https://www.instamobile.io/react-native-controls/react-native-swipe-cards-tinder/

但是我遇到了一个奇怪的问题，显示卡的 state 似乎没有正确更新。 第一次它似乎工作但从那时起病房它似乎总是返回 0

我制作了一个视频来说明奇怪的行为

https://youtu.be/CRSH36FdhlY

 import React, {useState, useEffect, useRef} from "react";
import { StyleSheet, View, Text, TouchableOpacity, Image, ImageBackground,  Animated, PanResponder,Dimensions  } from "react-native";
import { LinearGradient } from 'expo-linear-gradient';
import { StatusBar } from 'expo-status-bar';
import QuestionBox from "../Components/questionBox.js"

import {styles} from "./questionStyles.js"


const SCREEN_HEIGHT = Dimensions.get('window').height
const SCREEN_WIDTH = Dimensions.get('window').width

function QuestionScreen({route, navigation}) {
    
     const {players, mode} = route.params;
     
     const [questions, setQuestions]=useState([
     
     {title:"Dare", text:"boooooooooooo"},
     {title:"Question", text:"fdoooooo"},
     {title:"Question", text:"fdfsfsfsfsfsfsoooooo"},
     {title:"Dare", text:"bodfooo"}


     ]);

    
     const pan = useRef(new Animated.ValueXY()).current;
     const [currentIndex, setIndex] =useState(0);
     const [times, setTimes]=useState(0)
     
      
 const panResponder = useRef(
    PanResponder.create({
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      
      onPanResponderMove: Animated.event([null, { dx: pan.x, dy: pan.y }],{useNativeDriver: false}) ,

       onPanResponderRelease: (evt, gestureState) => {
       pan.flattenOffset();
      },
      onPanResponderRelease: (evt, gestureState) => {
    
        if (gestureState.dx > 120 ) {
        
          Animated.spring(pan, {
          
            toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy },
            useNativeDriver: true
          }).start(()=>{
          setIndex(currentIndex+1)
        pan.setValue({ x: 0, y: 0 })
        console.log("value of current index is: ".concat(currentIndex) )
        
          })
          
        } 
        
        else {
    Animated.spring(pan, {
       toValue: { x: 0, y: 0 },
       useNativeDriver: true,
       friction: 4
       }).start()
    }
          }
          
                  
    })
  ).current;

 const rotate = pan.x.interpolate({
    inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
    outputRange: ['-10deg', '0deg', '10deg'],
    extrapolate: 'clamp'
})
    const rotateAndTranslate= {
    transform:  [{rotate:rotate},{ translateX: pan.x }, { translateY: pan.y }]
        }

    const nextOpacity = pan.x.interpolate({
   inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
   outputRange: [0, 0, 1],
   extrapolate: 'clamp'
})

const nextCardOpacity = pan.x.interpolate({
   inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
   outputRange: [1, 0, 1],
   extrapolate: 'clamp'
})
const nextCardScale = pan.x.interpolate({
   inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
   outputRange: [1, 0.8, 1],
   extrapolate: 'clamp'
})   
     
    

const renderQuestions = () => {
   return questions.map((item, i) => {
  if (i < currentIndex) {
  return null
     } else if (i === currentIndex) {
    
     
      return (
        <Animated.View
        key={i}
          style={[rotateAndTranslate,{
                  
            height: "100%",
            width: "100%",
            flex:1    ,
        zIndex:1000,
         elevation:10,
            position:"absolute",
            flexDirection:"column"}]}
            {...panResponder.panHandlers}
        >
        <Animated.View
      style={{
        transform: [{ rotate: "20deg" }],
        position: "absolute",
        top: 20,
        right: 20,
        zIndex: 1000,
        elevation:100,
        opacity:nextOpacity
      }}
    >
      <Text
        style={{
          borderWidth: 1,
          borderColor: "#dd3fac",
          color: "#dd3fac",
          fontSize: 32,
          fontWeight: "800",
          padding: 10
        }}
      >
        NEXT >>
      </Text>
    </Animated.View>


          <QuestionBox title={item.title} text={item.text}  />
        </Animated.View>
      );

      }else {
     
       return (
        <Animated.View
        key={i}
          style={{
          
            height: "100%",
            width: "100%",
            flex:1    ,
            position:"absolute",
            flexDirection:"column",
            opacity: nextCardOpacity,
    transform: [{ scale: nextCardScale }]
    
    }}
            
        >
          <QuestionBox title={item.title} text={item.text}  />
        </Animated.View>
      );


      }
   }).reverse();
};


  
    
 return(
 <>
 <StatusBar   
       translucent={true} />  
       <ImageBackground source={vertBackground} style={styles.image}/>
    
 <View style={styles.container}>

    

    <View style={styles.spacer1} />
    
    <View style={{flex:4.6, width:"100%", height:"100%"}}>
    {renderQuestions()}
    </View>

    <View style={styles.spacer1} / >
    
    
    
   </View>
   </>
  );
}


export default QuestionScreen;

Answer 1

尝试像这样设置索引：

setIndex(currentIndexValue => currentIndexValue+1);