React-Native 组件之 Modal的使用详解
程序员文章站
2023-12-24 15:22:51
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);
运行效果:
从 modal 的源码可以看出,modal 其实就是使用了 绝对定位,所以当 modal 无法满足我们的需求的时候,我们就可以通过 绝对定位 自己来封装一个 modal
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。