使用React Native实现卡片随手势滑动

Windows 环境下的React Native Android应用

准备

项目构建
expo init project
cd project
expo start

在App.js同级目录下创建Message.js和MessageScreen.js两个文件
MessageScreen.js

import React from "react";
import styled from "styled-components";
import Message from "../components/Message";
import { PanResponder, Animated } from "react-native";
class MessageScreen extends React.Component {
    // 顶部Header的隐藏
    static navigationOptions = {
        header: null
    };
    state = {
        pan: new Animated.ValueXY()
    };

    componentWillMount() {
        // 设置手势的动作
        this._panResponder = PanResponder.create({
            // 将卡片同手势的移动而移动
            onMoveShouldSetPanResponder: () => true,
            onPanResponderMove: Animated.event([
                null,
                { dx: this.state.pan.x, dy: this.state.pan.y }
            ]),
            // 当移动结束后动画自动回到原始位置
            onPanResponderRelease: () => {
                Animated.spring(this.state.pan, {
                    toValue: { x: 0, y: 0 }
                }).start();
            }
        });
    }
    render() {
        return (
            <Container>
                {/* Animated.View标签是使该View具备可以设置动画的能力 */}
                <Animated.View
                    style={{
                        transform: [
                            { translateX: this.state.pan.x },
                            { translateY: this.state.pan.y }
                        ]
                    }}
                    {...this._panResponder.panHandlers}
                >
                    <Message
                        title="Price Tag"
                        // 如下的jpg可以设置自己喜欢的图片
                        image={require("../assets/background5.jpg")}
                        author="Tu Nan"
                        text="Thanks For Everyone, I improved my design skill and learned  top d0 animations for my app Price"
                    />
                </Animated.View>
            </Container>
        );
    }
}

export default MessageScreen;

const Container = styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
    background-color: #f0f3f5;
`;

Message.js

import React from "react";
import styled from "styled-components";

class Message extends React.Component {
    render() {
        return (
            <Container>
                <Cover>
                    <Image source={this.props.image} />
                    <Title>{this.props.title}</Title>
                    <Author>by {this.props.author}</Author>
                </Cover>
                <Text>{this.props.text}</Text>
            </Container>
        );
    }
}

export default Message;

const Container = styled.View`
    width: 315px;
    height: 460px;
    border-radius: 14px;
    background-color: white;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
`;
const Cover = styled.View`
    height: 290px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    overflow: hidden;
`;
const Image = styled.Image`
    width: 100%;
    height: 290px;
`;
const Title = styled.Text`
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
    font-weight: bold;
    color: white;
    width: 300px;
`;
const Author = styled.Text`
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
`;
const Text = styled.Text`
    font-size: 17px;
    margin: 20px;
    line-height: 24px;
    color: #3c4560;
`;

最终效果如下