欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

React-Native 组件之 Modal的使用详解

程序员文章站 2022-11-25 10:14:20
modal组件可以用来覆盖包含react native根视图的原生视图(如uiviewcontroller,activity),用它可以实现遮罩的效果。 属性 moda...

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的使用非常简单,例如:

<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', justifycontent: 'center', 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);

 运行效果:

React-Native 组件之 Modal的使用详解

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。