react-native 自定义弹窗组件实践

最新推荐文章于 2025-07-25 14:00:42 发布

原创

最新推荐文章于 2025-07-25 14:00:42 发布 · 2k 阅读

4 ·

CC 4.0 BY-SA版权

react-native上自定义弹窗组件

1、造轮子背景

用react-native写项目也有段时间了，一直没有看好自定义程度多高的自定义弹窗组件、
之前写了很长时间的iOS原生、一直觉得MMPopupView这个组件非常好用，当然还有一些其他的swift库，这个不是今天的重点，下次有空在介绍了。

先来看看效果
react-native 弹窗效果图
并且是纯js版本、不需要分别对安卓和iOS做任何类似react-native link的处理

2、看看代码

1 - 首先看下组件的最底层封装

import React, {
    Component,
} from 'react';
import {
    Animated,
    Easing,
    View,
    Text,
    StyleSheet,
    Dimensions,
    TouchableOpacity
} from 'react-native';
import PropTypes from 'prop-types';

const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity)

let element = null;

const screen_width = Dimensions.get("window").width;
const screen_height = Dimensions.get("window").height;
const marginHor = 50;
const animationDuration = 500


export default class PopupWindow extends Component {
    constructor(props) {
        super(props);
        this.state = {
            aniColor: new Animated.Value(0),
            aniScale: new Animated.Value(0),
            visible: false,
        };
        this.animationOpacity = Animated.timing(this.state.aniColor, {
            toValue: 0.5,
            duration: animationDuration,

        });
        this.animationScale = Animated.spring(this.state.aniScale, {
            toValue: 1,
            duration: animationDuration,
            bounciness: 10,
            speed: 20

        });
        this.animationGroup = Animated.parallel([this.animationOpacity, this.animat