使React Native Modal从上到下显示

E_Jovi 发表于 Dev

E_Jovi

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

谢谢你的时间。

纳德威尔

看起来该组件不支持这种类型的配置。

您可以做的一件事是使用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);