React-Native 组件之 Modal

前端之家收集整理的这篇文章主要介绍了React-Native 组件之 Modal前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity),用它可以实现遮罩的效果

属性

Modal提供的属性有:

animationType(动画类型) PropTypes.oneOf([‘none’,‘slide’,‘fade’]

  • none:没有动画
  • slide:从底部滑入
  • fade:淡入视野

onRequestClose(被销毁时会调用函数

onShow(模态显示的时候被调用

transparent (透明度) bool

  • 为true时,使用透明背景渲染模态。

visible(可见性) bool

onOrientationChange(方向改变时调用

  • 在模态方向变化时调用,提供的方向只是 ” 或 ”。在初始化渲染的时候也会调用,但是不考虑当前方向。

supportedOrientations(允许模态旋转到任何指定取向)[‘portrait’,‘portrait-upside-down’,‘landscape’,’landscape-left’,’landscape-right’])

  • 在iOS上,模态仍然受 info.plist 中的 UISupportedInterfaceOrientations字段中指定的限制。

示例

Modal的使用非常简单,例如:

<Modal
 animationType='slide'           // 从底部滑入 
 transparent={false}             // 不透明
 visible={this.state.isModal}    // 根据isModal决定是否显示
 onRequestClose={() => {this.onRequestClose()}}  // android必须实现
 >

综合例子:

import React,{ Component} from 'react';
import  {
    AppRegistry,View,Modal,TouchableOpacity,Text
} from 'react-native';
export default class ModalView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,}
    }
    setModalVisible = (visible)=> {
        this.setState({
           modalVisible: visible
        })
    };
    render(){
        return(
            <View style={{flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#ffaaff'}}>
                <Modal animationType={'none'}
                       transparent={true}
                       visible={this.state.modalVisible}
                       onrequestclose={() => {alert("Modal has been closed.")}}
                       onShow={() => {alert("Modal has been open.")}}
                       supportedOrientations={['portrait','portrait-upside-down','landscape','landscape-left','landscape-right']}
                       onOrientationChange={() => {alert("Modal has been OrientationChange.")}}>
                    <View style={{flex:1,marginTop: 22,backgroundColor: '#aaaaaa',alignItems: 'center'}}>
                        <View>
                            <Text>Hello World!</Text>
                            <TouchableOpacity onPress={() => {
                                this.setModalVisible(false)
                            }}>
                                <Text>隐藏 Modal</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>
                <TouchableOpacity onPress={() => {
                    this.setModalVisible(true)
                }}>
                    <Text>显示 Modal</Text>
                </TouchableOpacity>
            </View>
        )
    }
}
AppRegistry.registerComponent('ModalView',()=>ModalView); 

运行效果

从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal

原文链接:https://www.f2er.com/react/303398.html

猜你在找的React相关文章