重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

React-Native组件之Modal怎么用

这篇文章将为大家详细讲解有关React-Native组件之Modal怎么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

我们提供的服务有:网站制作、成都网站建设、微信公众号开发、网站优化、网站认证、邵阳ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的邵阳网站制作公司

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

属性

Modal提供的属性有:

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

  • none:没有动画

  • slide:从底部滑入

  • fade:淡入视野

onRequestClose(被销毁时会调用此函数)

在 ‘Android' 平台,必需调用此函数

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

transparent (透明度) bool

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

visible(可见性)bool

onOrientationChange(方向改变时调用)

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

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

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

示例

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

 {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(
      
         {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.")}}>
          
            
              Hello World!
               {
                this.setModalVisible(false)
              }}>
                隐藏 Modal
              
            
          
        
         {
          this.setModalVisible(true)
        }}>
          显示 Modal
        
      
    )
  }
}
AppRegistry.registerComponent('ModalView', ()=>ModalView);

 运行效果:

React-Native组件之Modal怎么用

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

关于“React-Native组件之Modal怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


文章题目:React-Native组件之Modal怎么用
分享URL:http://cqcxhl.com/article/gjipoi.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP