Arrays 如何使用functional react native从PanResponder中卸下第一张卡？_Arrays_React Native_Swipe_Tinder_Panresponder

Arrays 如何使用functional react native从PanResponder中卸下第一张卡？

arrays react-native

Arrays 如何使用functional react native从PanResponder中卸下第一张卡？,arrays,react-native,swipe,tinder,panresponder,Arrays,React Native,Swipe,Tinder,Panresponder,我正在学习react本机，是的，我是初学者，我想制作类似Tinder的应用程序，但我遇到了一个问题，无法刷第一张卡（意味着无法移除第一张卡）。这些代码没有错误消息。我尝试了一些解决方案，但仍然无法奏效。请有人帮我查一下这些密码 import React, { useEffect,useState,useRef } from 'react'; import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder, Pl

我正在学习react本机，是的，我是初学者，我想制作类似Tinder的应用程序，但我遇到了一个问题，无法刷第一张卡（意味着无法移除第一张卡）。这些代码没有错误消息。我尝试了一些解决方案，但仍然无法奏效。请有人帮我查一下这些密码

import React, { useEffect,useState,useRef } from 'react';
import { StyleSheet, Text, View, Dimensions, Image, Animated, PanResponder, Platform } from 'react-native';

const SCREEN_HEIGHT = Dimensions.get('window').height;
const SCREEN_WIDTH = Dimensions.get('window').width;
import Icon from 'react-native-vector-icons/Ionicons';
const Users = [
  { id: "1", uri: require('../image/antman.jpg') },
  { id: "2", uri: require('../image/butterfly.jpg') },
  { id: "3", uri: require('../image/captainmarvel.jpg') },
  { id: "4", uri: require('../image/antman.jpg') },
  { id: "5", uri: require('../image/antman.jpg') },
]

const colors = [
  {
    id: 1,
    color: 'red',
  },
  {
    id: 2,
    color: 'green'
  },
  {
    id: 3,
    color: 'blue',
  }
]

const SignUpScreen = () =>{

    const [position, setPosition] = useState(new Animated.ValueXY());
    const [currentIndex,setCurrentIndex] =useState(0);

    const rotate = position.x.interpolate({
      inputRange: [-SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2],
      outputRange: ['-30deg', '0deg', '10deg'],
      extrapolate: 'clamp'
    })

    const rotateAndTranslate = {
      transform: [{
        rotate: rotate
      },
      ...position.getTranslateTransform()
      ]
    }

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

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


 
    const panResponder = PanResponder.create({

      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onPanResponderMove: (evt, gestureState) => {

        setPosition(new Animated.ValueXY({x: gestureState.dx, y: gestureState.dy}));
      },
      onPanResponderRelease: (evt, gestureState) => {

        if (gestureState.dx > 120) {
          Animated.spring(position, {
            toValue: { x: SCREEN_WIDTH + 100, y: gestureState.dy }//,
            //duration: 500
          }).start(() => {
            //setCurrentIndex(currentIndex + 1 ), 
            setPosition(new AnimatedValue({x: 0, y: 0 }));  
            })
          }
        else if (gestureState.dx < -120) {
          Animated.spring(position, {
            toValue: { x: -SCREEN_WIDTH - 100, y: gestureState.dy }//,
            //duration: 500
          }).start(() => {
            //setCurrentIndex(currentIndex + 1 ), 
            setPosition(new AnimatedValue({x: 0, y: 0 }));  
            })
        }
        else {
          Animated.spring(position, {
            toValue: { x: 0, y: 0 },
            duration: 500
            //friction: 4
          }).start()
        }
      }
    })
  


  renderUsers = () => {

    return Users.map((item, i) => {

      
      if (i < currentIndex) {
        return null;
      }
      else if (i == currentIndex) {

        return (
          <Animated.View
            {...panResponder.panHandlers}
            key={item.id} style={[rotateAndTranslate, { height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute' }]}>
            <Animated.View style={{ opacity: likeOpacity, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>

            </Animated.View>

            <Animated.View style={{ opacity: dislikeOpacity, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>

            </Animated.View>

            <Image
              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
              source={item.uri} />

          </Animated.View>
        )
      }
      else {
        return (
          <Animated.View

            key={item.id} style={[{
              opacity: nextCardOpacity,
              transform: [{ scale: nextCardScale }],
              height: SCREEN_HEIGHT - 120, width: SCREEN_WIDTH, padding: 10, position: 'absolute'
            }]}>
            <Animated.View style={{ opacity: 0, transform: [{ rotate: '-30deg' }], position: 'absolute', top: 50, left: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'green', color: 'green', fontSize: 32, fontWeight: '800', padding: 10 }}>LIKE</Text>

            </Animated.View>

            <Animated.View style={{ opacity: 0, transform: [{ rotate: '30deg' }], position: 'absolute', top: 50, right: 40, zIndex: 1000 }}>
              <Text style={{ borderWidth: 1, borderColor: 'red', color: 'red', fontSize: 32, fontWeight: '800', padding: 10 }}>NOPE</Text>

            </Animated.View>

            <Image
              style={{ flex: 1, height: null, width: null, resizeMode: 'cover', borderRadius: 20 }}
              source={item.uri} />

          </Animated.View>
        )
      }
    }).reverse()
  }

  
    return (
      <View style={{ flex: 1 }}>
        <View style={{ height: 10 }}>

        </View>
        <View style={{ flex: 1 }}>
          {renderUsers()}
        </View>
        <View style={{ height: 20 }}>

        </View>


      </View>

    );
  };

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});



export default SignUpScreen;

import React，{useffect，useState，useRef}来自'React'；
从“react native”导入{样式表、文本、视图、尺寸、图像、动画、PanResponder、平台}；
const SCREEN_HEIGHT=尺寸.get（'window'）。高度；
const SCREEN_WIDTH=尺寸.get（'window'）.WIDTH；
从“反应本机矢量图标/离子图标”导入图标；
常量用户=[
{id:“1”，uri:require（'../image/antman.jpg'）}，
{id:“2”，uri:require（'../image/butterfly.jpg'）}，
{id:“3”，uri:require（'../image/captainmarvel.jpg'）}，
{id:“4”，uri:require（'../image/antman.jpg'）}，
{id:“5”，uri:require（'../image/antman.jpg'）}，
]
常量颜色=[
{
id:1，
颜色：“红色”，
},
{
id:2，
颜色：“绿色”
},
{
id:3，
颜色：“蓝色”，
}
]
const SignUpScreen=（）=>{
const[position，setPosition]=useState（新的动画.ValueXY（））；
const[currentIndex，setCurrentIndex]=useState（0）；
常量旋转=位置x插值({
输入范围：[-屏幕宽度/2,0，屏幕宽度/2]，
输出范围：['-30deg'，0deg'，10deg']，
推断：“钳子”
})
常量rotateAndTranslate={
转换：[{
旋转：旋转
},
…position.getTranslateTransform（）
]
}
const likeOpacity=position.x.interpolate({
输入范围：[-屏幕宽度/2,0，屏幕宽度/2]，
outputRange:[0,0,1]，
推断：“钳子”
})
const dislikeOpacity=position.x.interpolate({
输入范围：[-屏幕宽度/2,0，屏幕宽度/2]，
outputRange:[1,0,0]，
推断：“钳子”
})
const nextcardpacity=position.x.interpolate({
输入范围：[-屏幕宽度/2,0，屏幕宽度/2]，
outputRange:[1,0,1]，
推断：“钳子”
})
const nextCardScale=position.x.interpolate({
输入范围：[-屏幕宽度/2,0，屏幕宽度/2]，
输出范围：[1,0.8,1]，
推断：“钳子”
})
const panResponder=panResponder.create({
onStartShouldSetPanResponder:（evt，手势状态）=>真，
onPanResponderMove：（evt，手势状态）=>{
setPosition（新的动画.ValueXY（{x:gestureState.dx，y:gestureState.dy}））；
},
onPanResponderRelease：（evt，手势状态）=>{
如果（gestureState.dx>120）{
动画。弹簧（位置{
toValue:{x:SCREEN_WIDTH+100，y:gestureState.dy}/,，
//持续时间：500
}).start（（）=>{
//setCurrentIndex（currentIndex+1），
setPosition（新的AnimatedValue（{x:0，y:0}））；
})
}
else if（gestureState.dx<-120）{
动画。弹簧（位置{
toValue:{x:-屏幕宽度-100，y:gestureState.dy}/,，
//持续时间：500
}).start（（）=>{
//setCurrentIndex（currentIndex+1），
setPosition（新的AnimatedValue（{x:0，y:0}））；
})
}
否则{
动画。弹簧（位置{
toValue:{x:0，y:0}，
持续时间：500
//摩擦力：4
}).start（）
}
}
})
渲染器=（）=>{
返回Users.map（（项目，i）=>{
如果（i<当前索引）{
返回null；
}
else if（i==currentIndex）{
返回(
喜欢
不
)
}
否则{
返回(
喜欢
不
)
}
}).reverse（）
}
返回(
{renderUsers（）}
);
};
const styles=StyleSheet.create({
容器：{
弹性：1，
背景颜色：“#fff”，
对齐项目：“居中”，
为内容辩护：“中心”，
},
});
在屏幕上导出默认标志；

这些都是功能性的。请帮我解决问题，非常感谢。

这是问题所在

const [position, setPosition] = useState(new Animated.ValueXY());

宁可使用它

const [position] = useState(new Animated.ValueXY());

不要使用setPosition（）来更新位置

尝试使用setValue（）更新位置

我也做了同样的事，它起作用了

const [position, setPosition] = useState(new Animated.ValueXY());

宁可使用它

const [position] = useState(new Animated.ValueXY());

不要使用setPosition（）来更新位置

尝试使用setValue（）更新位置

我也这么做了，它很有效

尝试以下方法，添加@Kangkan-Lahkar解决方案

position.setValue({x: gestureState.dx, y: gestureState.dy});
//or 
position.setValue({x: 0, y: 0});

将其分为两个单独的变换：

const rotateAndTranslate = {
  transform: [{
    rotate: rotate
  },
  ...position.getTranslateTransform()
  ]
}

并应用于同一panResponder中的两个不同样式的容器例如：


....

尝试以下方法，添加@Kangkan Lahkar解决方案

position.setValue({x: gestureState.dx, y: gestureState.dy});
//or 
position.setValue({x: 0, y: 0});

将其分为两个单独的变换：

const rotateAndTranslate = {
  transform: [{
    rotate: rotate
  },
  ...position.getTranslateTransform()
  ]
}

并应用于同一panResponder中的两个不同样式的容器例如：


....

它可以刷卡但卡在第二张图像上，它不能刷卡第二张图像@kangkan LahkarIt可以刷卡但卡在第二张图像上，它不能刷卡第二张图像@kangkan Lahkar