Rn_模态框组件 ——react-native-modal使用

react-native-modal的github地址。该组件同时支持android和iOS。

modal.gif

---

简单用法

import Modal from "react-native-modal";

constructor(props) {
    super(props);
    this.state = {
        ModalIntroToggle: false,   // 模态框  默认false不显示
    }
}

---

render() {
    return(
        <TouchableOpacity onPress={()=>this.ModalIntroToggleFun()}>  {/*执行事件*/}
            <Text>2019届海南省詹州市第一中学高三统测试题（一）：语文</Text>
        </TouchableOpacity>
    )
}

---

// 通过 Fun()  让模态框变量  取反
ModalIntroToggleFun() {
    this.setState({
        ModalIntroToggle: !this.state.ModalIntroToggle,
    })
}
// 模态框  弹出简介
ModalIntroToggleFunWrap() {
    return(
        <Modal isVisible={this.state.ModalIntroToggle} backdropOpacity={0.2} style={{margin: 0, alignItems:'flex-start', justifyContent: 'flex-start'}} onBackdropPress={() => this.setState({ ModalIntroToggle: false })}>
            <TouchableOpacity onPress={() => this.ModalIntroToggleFun()}>
                <Image  source={require("../../resource/my/share_close.png")}></Image>
            </TouchableOpacity>
        </Modal>
    )
}

---

<Modal> 的常用属性名props

名称	默认	描述
style={{margin:0}}	顶部的Gif动态图	清除默认margin。模态框占满全屏
animationIn	'slideInUp'	模态框进入的方向
animationOut	'slideOutDown'	模态框离开的方向
animationInTiming	300	模态框进入动画时长
animationOutTiming	300	模态框离开动画时长
backdropColor	'black'	模态框背景颜色
backdropOpacity	0.70	模态框背景不透明度
onBackButtonPress	() => null	按下Android后退按钮时调用
onBackdropPress	() => null	按下背景时调用
onModalHide	() => null	当模态完全隐藏时调用
onModalShow	() => null	当模态完全可见时调用

事件的使用方式：固定写法isVisible是你自己声明的变量

onBackdropPress={() => this.setState({ isVisible: false })}