189 8069 5689
这篇文章将为大家详细讲解有关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); 运行效果：
从 modal 的源码可以看出，modal 其实就是使用了 绝对定位，所以当 modal 无法满足我们的需求的时候，我们就可以通过 绝对定位 自己来封装一个 modal
关于“React-Native组件之Modal怎么用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。