RN中模态框的使用

最新推荐文章于 2024-03-16 12:05:05 发布

Jump_Monkey

最新推荐文章于 2024-03-16 12:05:05 发布

阅读量482

点赞数

文章标签： react react native

本文链接：https://blog.csdn.net/Jump_Monkey/article/details/104003188

版权

1.安装依赖：

npm i react-native-modal --save

2.代码如下：

import React, { Component } from 'react';
import { 
    Text, 
    View,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';

import Modal from 'react-native-modal';

export default class ModalIndex extends Component {
    constructor(props) {
        super(props);
        this.state={
            modalVisible: false,
        }
    }

    close = () => {
        this.setState({
            modalVisible: false,
        })
    }

    openModal = () => {
        this.setState({
            modalVisible: true,
        })
    }
    render() {
        return (
            <View>
                <Text> AppCenterIndex </Text>
                <Modal
                    isVisible={this.state.modalVisible}
                    backdropOpacity={0.2}
                    style={styles.modalStyle}
                    onBackdropPress={this.close} // 按下Android后退按钮时调用
                    onBackdropPress={this.close} // 按下背景时调用
                    // slidInUp 下方进入  fadeInRight右侧进入 fadeInLeft左侧进入
                    animationIn='fadeInLeft' // 模态框进入的方向

                    // slideOutDown 下方离开 fadeOutRight右侧离开 fadeOutLeft左侧离开
                    animationOut='fadeOutLeft' // 模态框离开的方向
                >
                    <View style={styles.minBox}>
                        <Text>modale</Text>
                        <TouchableOpacity
                            onPress={this.close}
                        >
                            <Text>关闭</Text>
                        </TouchableOpacity>
                    </View>
                    
                </Modal>

                <TouchableOpacity
                    onPress={this.openModal}
                >
                    <Text>openModal</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    modalStyle: {
        margin: 0,
        alignItems:'flex-start',
        justifyContent: 'flex-start',
    },
    minBox: {
        paddingTop: 50,
        marginLeft: 20,
        flex: 1,
        backgroundColor: '#fff',
        width: 300,
        position: 'absolute',
        right: 0,
        top: 0,
        bottom: 0,
    },
});