react-native 弹窗

新建 MyModal.js

import React, {Component} from 'react';
import {Animated, LayoutAnimation, Modal, Text, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import Util from "../../app2/common/util";   //Util.size.width 是屏幕宽度

class MyModal extends Component {

    // 使用案例
    // <MyModal
    // animationType={'fade'}
    // TouchOtherClose={(e)=>this.setState({modalVisible:e})}   //添加这个属性表示点击透明的背景时会隐藏弹窗、不添加时点击背景时弹窗不会消失
    // modalVisible={this.state.modalVisible}
    // style={{borderTopRightRadius:10,borderTopLeftRadius:10,height:200,width:Util.size.width,backgroundColor:'#fff'}}
    // position={'center'}
    // >
    // <View>
    // <Text>ssssdfhdjsfh </Text>
    // </View>
    // </MyModal>

    static defaultProps = {
        modalVisible: false,
        animationType: 'fade',
        position:'center',
        style:{
            width:Util.size.width,
            backgroundColor:'#fff',
            height:200
        }
    };


    constructor(p) {
        super(p);
        this.state = {
            modalVisible:false,
            h:1,
        }
    }

    componentWillReceiveProps(nextProps, nextContext) {
        let modalVisible = nextProps.modalVisible
        this.setState({
            modalVisible:modalVisible,
        })

        if(modalVisible){
            setTimeout(()=>{
                LayoutAnimation.spring();
                this.setState({h: this.props.style.height})
            },20)
        }else{
            this.setState({
                h:1
            })
        }

    }

    closeModal(){
        this.setState({modalVisible:false})
        this.props.TouchOtherClose(false)
    }


    render() {
        let { modalVisible } = this.state
        let {position,animationType,style} = this.props
        return (
            <Modal
                animationType={animationType}
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    // Alert.alert("Modal has been closed.");
                }}
            >

                {
                    position === 'bottom' ?
                    <TouchableOpacity
                        onPress={()=>this.closeModal()}
                        style={{backgroundColor:'rgba(0,0,0,0.5)',flex:1,justifyContent:'flex-end',alignItems:'center'}}>
                        <TouchableWithoutFeedback>
                            <Animated.View style={[style,{height:this.state.h,}]}>
                                {
                                    this.props.children?
                                        this.props.children:
                                        <View style={{width:Util.size.width-60,backgroundColor:'#fff',borderRadius:10,height:180}}>
                                            <View style={{justifyContent:'center',flex:1,alignItems:'center'}}>
                                                <Text>点击外围关闭模态框</Text>
                                            </View>
                                        </View>
                                }
                            </Animated.View>
                        </TouchableWithoutFeedback>
                    </TouchableOpacity>
                        :
                    <TouchableOpacity
                        onPress={()=>this.closeModal()}
                        style={{backgroundColor:'rgba(0,0,0,0.5)',flex:1,justifyContent:'center',alignItems:'center'}}>
                        <TouchableWithoutFeedback>
                            <View style={[style]}>
                                {
                                    this.props.children?
                                        this.props.children:
                                        <View style={{width:Util.size.width-60,backgroundColor:'#fff',borderRadius:10,height:180}}>
                                            <View style={{justifyContent:'center',flex:1,alignItems:'center'}}>
                                                <Text>点击外围关闭模态框</Text>
                                            </View>
                                        </View>
                                }
                            </View>
                        </TouchableWithoutFeedback>
                    </TouchableOpacity>
                }

            </Modal>

        );
    }
}

export default MyModal;

使用

import MyModal from "../common/MyModal";

            <MyModal
                animationType={'fade'}
                TouchOtherClose={(e)=>this.setState({modalVisible:e})}
                modalVisible={this.state.modalVisible}
                style={{borderTopRightRadius:10,borderTopLeftRadius:10,height:200,width:Util.size.width,backgroundColor:'#fff'}}   //弹窗样式
                position={'center'}   // bottom  、center
            >
                <View>
                    <Text>ssssdfhdjsfh </Text>
                </View>
             </MyModal>