react-native - 使 React Native Modal 从上到下出现

Question

我注意到 Modal组件的 animationType属性只允许它从下到上滑动。如何更改动画并使模态从上到下显示？

谢谢你的时间。

Answer 1

看起来该组件不允许这种类型的配置。

您可以做的一件事是使用 Animated 库来创建您自己的模态。您将设置 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);