react-native – 使React Native Modal从上到下显示

您可以做的一件事是使用动画库来创建自己的模态.您可以将translateY属性设置为设备高度的负值,然后将translateY值设置为0：

openModal() {
    Animated.timing(this.state.modalY,{
        duration: 300,toValue: 0
     }).start();
  },closeModal() {
    Animated.timing(this.state.modalY,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,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',}
});

AppRegistry.registerComponent('SampleApp',() => SampleApp);