react-native手势动画制作精美卡片拖拽效果

视频学习地址https://www.bilibili.com/video/BV1h7411o7zE

代码

import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  PanResponder,
  Animated,
  Image,
  Dimensions
} from 'react-native'
import styled from 'styled-components'
import Card from './Card'
import { connect } from 'react-redux'
import Login from './login/Login'

const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height + 50

class Home extends Component {
  state = {
    backgroundColor: '#fffae5',
    pan: new Animated.ValueXY(0, 0),
    scale: new Animated.Value(0.9),
    translateY: new Animated.Value(40),
    thirdTranslateY: new Animated.Value(20),
    dataIndex: 0
  }
  UNSAFE_componentWillMount() {
    this._panResponder = PanResponder.create({
      onMoveShouldSetPanResponder: (event,gestureState) => {
        if(gestureState.dx === 0 && gestureState.dy === 0) {
          return false
        } else {
          if(this.props.action === 'openCard') {
            return false
          } else {
            return true
          }
        }
      },
      onPanResponderGrant: () => {
        Animated.spring(this.state.scale, { toValue: 1, useNativeDriver: false }).start()
        Animated.spring(this.state.translateY, { toValue: 0, useNativeDriver: false }).start()
        this.setState({ backgroundColor: '#ccc' })
        Animated.spring(this.state.thirdTranslateY, { toValue: 45, useNativeDriver: false }).start()
      },
      onPanResponderMove: Animated.event([
        null,
        { dx: this.state.pan.x, dy: this.state.pan.y }
      ],
        { useNativeDriver: false }),
      onPanResponderRelease: () => {
        const currentY = this.state.pan.y.__getValue();
        if (currentY > 250) {
          Animated.timing(this.state.pan, {
            toValue: { x: 0, y: 800 },
            duration: 200,
            useNativeDriver: false
          }).start(() => {
            Animated.timing(this.state.pan, {
              toValue: { x: 0, y: 0 },
              duration: 0,
              useNativeDriver: false
            }).start()
            this.setState({ dataIndex: shouldIndex(this.state.dataIndex) })
            Animated.spring(this.state.scale, { toValue: 0.9, useNativeDriver: false }).start()
          })
        } else {
          Animated.spring(this.state.pan, {
            toValue: { x: 0, y: 0 },
            useNativeDriver: false
          }).start()
          Animated.spring(this.state.scale, { toValue: 0.9, useNativeDriver: false }).start()
          Animated.spring(this.state.translateY, { toValue: 40, useNativeDriver: false }).start()
          Animated.spring(this.state.thirdTranslateY, { toValue: 20, useNativeDriver: false }).start()
        }
        this.setState({ backgroundColor: '#fffae5' })
      }
    })
  }

  render() {
    const { scale, translateY, backgroundColor, thirdScale, thirdTranslateY, dataIndex } = this.state
    return (
      <View style={[styles.container, { backgroundColor: backgroundColor }]}>
        <Animated.View style={
          {
            transform: [
              { translateX: this.state.pan.x, },
              { translateY: this.state.pan.y, }
            ]
          }}
          {...this._panResponder.panHandlers}
        >
          <Card canOpen={true} {...CardData[dataIndex]} />
        </Animated.View>
        <Animated.View style={[
          styles.otherCard,
          {
            transform: [
              { scale: scale },
              { translateY: translateY }
            ]
          }]}
        >
          <Card {...CardData[shouldIndex(dataIndex)]} />
        </Animated.View>
        <Animated.View style={[
          styles.otherCard,
          {
            transform: [
              { scale: 0.9 },
              { translateY: thirdTranslateY }
            ],
            zIndex: -2
          }]}
        >
          <Card {...CardData[shouldIndex(dataIndex + 1)]} />
        </Animated.View>
        {/* <Login /> */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  otherCard: {
    position: 'absolute',
    zIndex: -1
  },
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ddd',
    width: '100%',
    height: screenHeight
  }
});

function shouldIndex(index) {
  let shouldIndex = index + 1
  if (shouldIndex > CardData.length - 1) {
    return 0
  }
  return shouldIndex
}

const CardData = [
  {
    image: require('../assets/0.jpg'),
    title: 'Awesome Styled Components',
    startNum: 29.5,
    info: 'Visual primitives for the component age Use the best bits of ES6 and CSS to style your apps without stress 

标签：const,return,react,state,action,false,Animated,拖拽,native	

From： https://blog.51cto.com/u_15964288/6056979