在Animated.View中反应原生ScrollView以创建类似于Bumble的swipe系统

import React from 'react';
import { View, ScrollView, Animated, StyleSheet } from 'react-native';

class SwipeSystem extends React.Component {
  constructor(props) {
    super(props);
    this.position = new Animated.Value(0);
  }

  handleScroll = event => {
    const { contentOffset } = event.nativeEvent;
    this.position.setValue(contentOffset.x);
  };

  render() {
    const interpolateAnimation = this.position.interpolate({
      inputRange: [0, SCREEN_WIDTH],
      outputRange: ['0deg', '45deg'],
    });
    const animatedStyle = {
      transform: [{ rotate: interpolateAnimation }],
    };

    return (
      <View style={styles.container}>
        <Animated.View style={[styles.swipeCard, animatedStyle]}>
          <ScrollView
            horizontal
            pagingEnabled
            showsHorizontalScrollIndicator={false}
            onScroll={this.handleScroll}
            scrollEventThrottle={16}
          >
            {/* Add your swipe cards here */}
            <View style={styles.card} />
            <View style={styles.card} />
            <View style={styles.card} />
          </ScrollView>
        </Animated.View>
      </View>
    );
  }
}

const SCREEN_WIDTH = Dimensions.get('window').width;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  swipeCard: {
    width: SCREEN_WIDTH,
    height: 400,
    alignItems: 'center',
    justifyContent: 'center',
  },
  card: {
    width: SCREEN_WIDTH - 60,
    height: 300,
    margin: 30,
    backgroundColor: 'gray',
    borderRadius: 10,
  },
});

export default SwipeSystem;