0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> Modal

Modal 组件是一种简单的覆盖在其他视图之上显示内容的方式。

属性

名称

类型

平台

说明

visible

bool

visible属性决定 modal 是否显示。

supportedOrientations

array of enum(‘portrait’, ‘portrait-upside-down’, ‘landscape’, ‘landscape-left’, ‘landscape-right’)

iOS

用于指定在设备切换横竖屏方向时,modal 会在哪些屏幕朝向下跟随旋转。

onRequestClose

function

回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。Android平台必填

onShow

function

回调函数会在 modal 显示时调用。

transparent

bool

属性是指背景是否透明,默认为白色.

animationType

enum(‘none’, ‘slide’, ‘fade’)

指定了 modal 的动画类型。

hardwareAccelerated

bool

Android

决定是否强制启用硬件加速来绘制弹出层。

onDismiss

function

iOS

回调会在 modal 被关闭时调用。

onOrientationChange

function

iOS

无论当前方向如何,也会在初始渲染时调用此回调方法。

presentationStyle

enum(‘fullScreen’, ‘pageSheet’, ‘formSheet’, ‘overFullScreen’)

iOS

决定 modal(在较大屏幕的设备比如 iPad 或是 Plus 机型)如何展现。

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
StyleSheet,
Modal,
View,
Text,
TouchableHighlight
} from 'react-native';

export default class App extends Component {
state = {
modalVisible: false
};
setModalVisible(visible) {
this.setState({
modalVisible: visible
});
}
render() {
return (
<View style={styles.container}>
<Modal
animationType='slide'
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => {
alert('modal has been closed.');
}}
>
< View style = {
styles.container
} >
<View>
<Text style = {styles.text}>Hello Modal!</Text>
<TouchableHighlight
onPress={() => {
this.setModalVisible(!this.state.modalVisible);
}}
>
<Text>hide modal</Text>
</TouchableHighlight>
</View>
</View>
</Modal>
<TouchableHighlight
onPress={() => {
this.setModalVisible(true);
}}
>
<Text>show modal</Text>
</TouchableHighlight>
</View>
)
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
paddingHorizontal: 20,
paddingTop:20
},

text: {
fontSize: 20
}

});

2. 效果图

【Kevin Learn React Native】--> Modal_android


举报

相关推荐

0 条评论