Modal 模态弹层组件 >=1.3.0
通用的模态弹层组件,支持多种位置/动画效果
属性
visible { bool }
模态层显示/隐藏属性
默认值: false
onShow { function }
模态层显示时的时间回调
默认值: ()=>{}
onHide { function }
模态层隐藏时的事件回调
默认值: ()=>{}
onMaskPress { function }
点击遮罩层时的事件回调
默认值: ()=>{}
animation { string/array }
设置打开/关闭模态框时的动画效果。
已经实现的几种动画效果为:"fade","slideFromBottom","slideFromTop","slideFromLeft","slideFromRight"
除了使用已经实现的动画效果,你也可以自定义动画效果,这个时候应该给animation属性传入一个数组,形式为
[ show:[ { style:要绑定动画效果的css属性,必需 toValue:目标值,必需 duration:动画持续时间,必需 easing:easing函数,默认为Easing.ease,请参考RN的Easing类 }, ...可以继续传入其他动画配置,这些动画会并行的执行(调用Animated.Timing) ], hide:[...和show的配置相同] ]
以下是fade效果的animation属性配置,可以用来参考:
{ show:[ { style:'opacity', toValue:1, duration:200 } ], hide:[ { style:'opacity', toValue:0, duration:200 } ] }
默认值: "none"
maskOpacity { number }
遮罩层的透明度[0-1]
默认值: 0.4
offset { number }
可以通过设置offset来使模态框向上/向下偏移,例如-100就可以让模态层向上偏移100个像素
默认值: 0
position { string }
设置模态层显示的位置,共支持5种位置:center,top,bottom,left,right,默认为center
默认值: center
showNavBarMask { bool }
是否让遮罩层遮盖住导航条,只对Ext的导航条生效
默认值: true
示例
import {Modal, View, Text, Component, TouchableOpacity, Dimensions} from 'qunar-react-native';
class ModalExampleList extends Component {
constructor(props) {
super(props);
this.state = {
defaultConfig: false,
fade: false,
slide: false,
offset: false,
left: false,
noNavBarMask: false,
actionSheet: false
}
}
closeModal(modalName) {
this.setState({
[modalName]: false
});
}
openModal(modalName) {
this.setState({[modalName]: true});
}
render() {
return (
<View style={{flex: 1}}>
<View style={styles.noteWrap}>
<Text style={styles.noteWrapTextIcon}>{'\uf07f'}</Text>
<Text style={styles.noteWrapText}>Modal Example</Text>
</View>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('defaultConfig')}>
<Text style={styles.listRowText}>默认配置</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('fade')}>
<Text style={styles.listRowText}>Fade动画效果</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('slide')}>
<Text style={styles.listRowText}>SlideFromBottom动画效果</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('offset')}>
<Text style={styles.listRowText}>设置offset和slideFromTop</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('left')}>
<Text style={styles.listRowText}>设置position:left和slideFromLeft</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('noNavBarMask')}>
<Text style={styles.listRowText}>设置showNavBarMask=false</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.listRow} onPress={()=>this.openModal('actionSheet')}>
<Text style={styles.listRowText}>使用Modal实现一个ActionSheet</Text>
</TouchableOpacity>
<Modal visible={this.state.defaultConfig}>
<View style={styles.content}>
<Text>
这是一个全部应用默认属性的Modal
</Text>
<Text>
并且没有配置onMaskPress
</Text>
<TouchableOpacity onPress={()=>this.closeModal('defaultConfig')}>
<Text style={styles.closeBtn}>点击关闭</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
visible={this.state.fade}
animation="fade"
onMaskPress={()=>this.closeModal('fade')}
>
<View style={styles.content}>
<Text>这是一个有fade效果的Modal</Text>
<TouchableOpacity onPress={()=>this.closeModal('fade')}>
<Text style={styles.closeBtn}>点击关闭</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
visible={this.state.slide}
animation="slideFromBottom"
onMaskPress={()=>this.closeModal('slide')}
>
<View style={styles.content}>
<Text>这是一个有slideFromBottom效果的Modal</Text>
<TouchableOpacity onPress={()=>this.closeModal('slide')}>
<Text style={styles.closeBtn}>点击关闭</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
visible={this.state.offset}
animation="slideFromTop"
onMaskPress={()=>this.closeModal('offset')}
offset={-200}
>
<View style={styles.content}>
<Text>这个Modal向上偏移了200个像素,</Text>
<Text>并且设置了slideFromTop效果</Text>
<TouchableOpacity onPress={()=>this.closeModal('offset')}>
<Text style={styles.closeBtn}>点击关闭</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
visible={this.state.left}
animation="slideFromLeft"
onMaskPress={()=>this.closeModal('left')}
position="left"
>
<View style={styles.content}>
<Text>这个Modal设置了position:left</Text>
<Text>并且设置了slideFromLeft效果</Text>
<TouchableOpacity onPress={()=>this.closeModal('left')}>
<Text style={styles.closeBtn}>点击关闭</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
visible={this.state.noNavBarMask}
animation="slideFromRight"
onMaskPress={()=>this.closeModal('noNavBarMask')}
position="right"
showNavBarMask={false}
>
<View style={styles.content}>
<Text>这个Modal设置了position:right</Text>
<Text>并且设置了slideFromRight效果</Text>
<Text>以及showNavBarMask=false</Text>
<TouchableOpacity onPress={()=>this.closeModal('noNavBarMask')}>
<Text style={styles.closeBtn}>点击关闭</Text>
</TouchableOpacity>
</View>
</Modal>
<Modal
visible={this.state.actionSheet}
animation="slideFromBottom"
position="bottom"
onMaskPress={()=>this.closeModal('actionSheet')}
>
<View style={styles.actionSheetContent}>
<Text>通过配置Modal的位置和动画效果</Text>
<Text>可以很轻易地实现一个ActionSheet组件</Text>
</View>
</Modal>
</View>
);
}
}
import commonStyles from '../styles';
let styles = Object.assign({
actionSheetContent: {
width: Dimensions.get('window').width,
height: 200,
backgroundColor: 'white',
padding: 20
},
content: {
backgroundColor: 'white',
padding: 20
},
closeBtn: {
marginTop: 10
}
}, commonStyles);
module.exports = {
title: 'Modal',
examples: [
{
render(){
return <ModalExampleList/>;
}
}
]
};