Question

所以基本上我正在制作一个应用，其中您向右滑动表示是，向左滑动表示否。现在的问题是，我希望正确的文本显示在随用户滑动方向而变化的卡上。

PanResponder通过修改state.changeText处理要更改的文本，并根据方向更改文本。该代码目前部分起作用，但是我现在遇到的问题是，在滑动过程中显示的changeText的先前状态值与当前的状态值相反。

代码如下所示。

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

显然您有一个错误，您的班级中没有changetext方法，但您正在用它来擦拭左写字母，尝试将其删除并检查它是否有效

      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

实际上我意识到了自己的错误。将setState添加到onPanResponderMove可以达到目的

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:"",
}

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

2 个答案: