React-Native组件之Modal怎么用

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

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

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