如何使用React Native修改状态Text？

Question

So basically I am making an app where you swipe right for yes and swipe left for no. The problem I have now is that I want the right text to appear on the card that changes based on the direction the user is swiping.

The PanResponder handles the text being changed by modifing the state.changeText and changes the text based on the direction. The code partly works at the moment but the problem I have now is that the previous state value for the changeText is what shows during the swiping process as opposed to the current one.

The code is shown below.

import React from "react"
import {
  View, Text, Animated, ScrollView, StyleSheet, Button,PanResponder,Dimensions
} from "react-native"
import Icon from "react-native-vector-icons/Ionicons" 
import {Card, Badge} from "react-native-elements"

const screenWidth =Dimensions.get("window").width
const swipeThreshold = screenWidth * .25


export default class SwipeCard extends React.Component{
  constructor(props){
    super(props);
    //this initiates the dragging animation
    const position = new Animated.ValueXY();
    const panResponder = PanResponder.create({
      // if true anytime the user starts to click down on the screen, the panresponder handles the action

        onStartShouldSetPanResponder : () => true,
          //everytime the user drags on the screen
        onPanResponderMove : (event, gesture) => {
          //get the distance they dragged the item by and update it in the animation
          position.setValue({x: gesture.dx, y: gesture.dy})
          this.setState({
            style:{
              opacity:1,
          }})

        },
        //everytime the user lets go
        onPanResponderRelease: (event, gesture) => {
          this.setState({
            style:{
              opacity:0,
          }})
          if(gesture.dx > swipeThreshold){
            console.log("swipe right!");
            this.setState({change: "swipe right!"})
            position.setValue({x:0, y:0});

            this.nextItem();
          }
          else if (gesture.dx < -swipeThreshold){
            console.log("swipe left!");
            this.changeText("swipe left")
            this.setState({change: "swipe left!"})

            position.setValue({x:0, y:0});

            this.nextItem();
          }
          else{
            position.setValue({x:0, y:0});
            this.setState({
              style:{
                opacity:0,
            }})
          }
        }
    })
    this.state={
      index:1,
      panResponder,
      position,
      style:{
        opacity:0,
      },
      changeText:"",
    }
    this.nextItem=this.nextItem.bind(this);
  }


  getCardStlye(){
    const {position} = this.state;
    const rotate = position.x.interpolate({
        inputRange: [-screenWidth * 2, 0, screenWidth*2],
        outputRange: ["-120deg", "0deg", "120deg"]
    });
    return {
      ...position.getLayout(),
      transform: [{rotate}]

    }
  }



  nextItem() {
        if(this.state.index !== this.props.data.length){
           this.setState({ index: this.state.index + 1 })
       }
       else {
          this.setState({ index:0});
        }

  }
  render(){
    var cloth = this.props.data.find((cloth, i)=>{
      return i+1 === this.state.index;
    })

    return(
        <ScrollView>
           {this.state.index ?(
        <Animated.View
           key ={cloth.deal.id}
           style={this.getCardStlye()}
           {...this.state.panResponder.panHandlers}>
           <Card
             title={cloth.deal.merchant.name}
             image ={{uri:cloth.deal.image_url}}
             >
             <Text
                style ={this.state.style}>
                {this.state.changeText}
                </Text>
             <Text>${cloth.deal.price}</Text>
             <Button
               title="Details"
               backgroundColor="blue"
             ></Button>
             </Card>
         </Animated.View>
           )
         :
         <Text>Null</Text>
           }
       </ScrollView>
    )
 }


  }

Answer 1

Apparently you have a mistake, you don't have a changetext method in your class yet you're using it in swiping left case, try to remove it and check if it works

      if(gesture.dx > swipeThreshold){
        console.log("swipe right!");
        this.setState({change: "swipe right!"})
        position.setValue({x:0, y:0});

        this.nextItem();
      }
      else if (gesture.dx < -swipeThreshold){
        console.log("swipe left!");
        this.changeText("swipe left") // <<< HERE
        this.setState({change: "swipe left!"})

        position.setValue({x:0, y:0});

        this.nextItem();
      }
      else{

Answer 2

Actually I realized my mistake. Adding the setState to onPanResponderMove did the trick

const panResponder = PanResponder.create({
  // if true anytime the user starts to click down on the screen, the panresponder handles the action

    onStartShouldSetPanResponder : () => true,
      //everytime the user drags on the screen
    onPanResponderMove : (event, gesture) => {
      //get the distance they dragged the item by and update it in the animation
      position.setValue({x: gesture.dx, y: gesture.dy})
      if(gesture.dx > swipeThreshold){
        console.log("swipe right!");
        this.setState({changeText: "swipe right!"})
      }
      else if (gesture.dx < -swipeThreshold){
        console.log("swipe left!");
        this.setState({changeText: "swipe left!"})
      }
      else{
        this.setState({
          style:{
            opacity:0,
        }})
      }
      this.setState({
        style:{
          opacity:1,
      }
    })

    },
    //everytime the user lets go
    onPanResponderRelease: (event, gesture) => {
      this.setState({
        style:{
          opacity:0,
      }})
      if(gesture.dx > swipeThreshold){
        console.log("swipe right!");
        this.setState({changeText: ""})
        position.setValue({x:0, y:0});
        this.addItems()
        this.nextItem();
      }
      else if (gesture.dx < -swipeThreshold){
        console.log("swipe left!");
        this.setState({changeText: ""})
        position.setValue({x:0, y:0});
        this.nextItem();
      }
      else{
        position.setValue({x:0, y:0});
        this.setState({
          style:{
            opacity:0,
        }})
      }
    }
})
this.state={
  index:1,
  panResponder,
  position,
  style:{
    opacity:0,
  },
  changeText:"",
  items:[],
  itemName:"",
}