视频学习地址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