React Native Modal 自定义Dialog
Modal
Modal组件可以用来覆盖包含React Native根视图的原生视图(如UIViewController,Activity)。
在嵌入React Native的混合应用中可以使用Modal。Modal可以使你应用中RN编写的那部分内容覆盖在原生视图上显示。
属性
-
animationType(动画类型) PropTypes.oneOf(['none', 'slide', 'fade'])
- none:没有动画
- slide:从底部滑入
- fade:淡入视野
-
onRequestClose(被销毁时会调用此函数)Platform.OS ==='android'?PropTypes.func.isRequired:PropTypes.func
在 'Android' 平台,必需使用此函数 -
onShow(模态显示的时候被调用)function
-
transparent (透明度) bool
-
true时,使用透明背景渲染模态。
-
visible(可见性) bool
-
决定模态是否可见
-
onOrientationChange(方向改变时调用)PropTypes.func
- 在模态方向变化时调用,提供的方向只是 '' 或 ''。在初始化渲染的时候也会调用,但是不考虑当前方向。
-
supportedOrientations(允许模态旋转到任何指定取向)
- PropTypes.arrayOf(PropTypes.oneOf(['portrait', 'portrait-upside-down', 'landscape','landscape-left','landscape-right']))
Demo演示
import React, {Component} from 'react';
import {Modal,View,Text} from 'react-native';
export default class DialogDemo extends Component {
constructor(props) {
super(props);//这一句不能省略,照抄即可
this.state = {
animationType: 'fade',//none slide fade
modalVisible: false,//模态场景是否可见
transparent: true,//是否透明显示
};
}
render() {
return <Modal
animationType={this.state.animationType}
transparent={this.state.transparent}
visible={this.state.modalVisible}
onRequestClose={() => {
this._setModalVisible(false)
}}
onShow={this.startShow}
>
<View style={{justifyContent :'center', flex:1,backgroundColor:'rgba(0, 0, 0, 0.5)' }}>
<View style={{ marginLeft:50,marginRight:50,alignItems:'center', backgroundColor:'white',borderRadius:5}}>
<Text>哗啦啦</Text>
<Text>哗啦啦</Text>
<Text>哗啦啦</Text>
<Text>哗啦啦</Text>
<Text>哗啦啦</Text>
<Text>哗啦啦</Text>
</View>
</View>
</Modal>
}
_setModalVisible = (visible) => {
this.setState({modalVisible: visible});
}
startShow = () => {
// alert('开始显示了');
}
}
调用
return <View style={{flex: 1,}}>
<DialogDemo
ref="dialog"
/>
<Button
onPress={() => {
this.refs.dialog._setModalVisible(true);
}
}
title="点击现实dialog"
/>
</View>
图片.png
网友评论