如何使用 React Native 修改状态文本?

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