1

我正在学习 react-native，是的，我是初学者，我想制作类似 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;

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

4

2 回答 2

0

这是问题所在。

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

而是使用它

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

不要使用setPosition()来更新position。

setPosition(new Animated.ValueXY({x: gestureState.dx, y: gestureState.dy}));
//or
setPosition(new AnimatedValue({x: 0, y: 0 }));

尝试setValue()更新位置

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

我也是这样做的，成功了

于 2020-07-27T17:58:54.053 回答
0

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

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

将其分成2个单独的变换：

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

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

<Animated.View {...panResponder.panHandlers}
   style={[...position.getTranslateTransform()]}>

   <Animated.View style={{ ... transform:[{rotate: rotate}] }}> ....</Animated.View> 

</Animated.View>
于 2021-05-27T02:35:21.717 回答