我注意到Modal组件的animationType
属性只允许它从下到上滑动。如何更改动画并使模态从上到下显示?
感谢您的时间。
答案 0 :(得分:11)
看起来该组件不允许这种类型的配置。
您可以做的一件事是使用动画库来创建自己的模态。您可以将translateY
属性设置为设备高度的负值,然后将translateY
值设置为0:
openModal() {
Animated.timing(this.state.modalY, {
duration: 300,
toValue: 0
}).start();
},
closeModal() {
Animated.timing(this.state.modalY, {
duration: 300,
toValue: -deviceHeight
}).start();
},
完整实施如下:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Animated,
Dimensions
} = React;
let deviceHeight = Dimensions.get('window').height
var deviceWidth = Dimensions.get('window').width
var SampleApp = React.createClass({
openModal() {
Animated.timing(this.state.modalY, {
duration: 300,
toValue: 0
}).start();
},
closeModal() {
Animated.timing(this.state.modalY, {
duration: 300,
toValue: -deviceHeight
}).start();
},
getInitialState(){
return {
modalY: new Animated.Value(-deviceHeight)
}
},
render() {
var Modal = <Animated.View style={[ styles.modal, { transform: [ {translateY: this.state.modalY}] }]}>
<TouchableHighlight onPress={ this.closeModal } underlayColor="green" style={ styles.button }>
<Text style={ styles.buttonText }>Close Modal</Text>
</TouchableHighlight>
</Animated.View>
return (
<View style={styles.container}>
<TouchableHighlight onPress={ this.openModal } underlayColor="green" style={ styles.button }>
<Text style={ styles.buttonText }>Show Modal</Text>
</TouchableHighlight>
{ Modal }
</View>
);
}
});
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center'
},
button: {
backgroundColor: 'green',
alignItems: 'center',
height: 60,
justifyContent: 'center',
},
buttonText: {
color: 'white'
},
modal: {
height: deviceHeight,
width: deviceWidth,
position: 'absolute',
top:0,
left:0,
backgroundColor: '#ededed',
justifyContent: 'center',
}
});
AppRegistry.registerComponent('SampleApp', () => SampleApp);