React Native模式可以抵消下面的内容

Question

在标题中，我有一个隐藏的模态，直到用户按下按钮。该功能有效，但当模态隐藏在同一容器中时，内容与模态被隐藏模态偏移。

我想知道最好的办法是什么。我应该有一些代码应用display：none隐藏模态时，还是有更好的方法？

import React, { Component } from 'react';
import * as firebase from 'firebase';
import { ActivityIndicator, ListView, Modal, Text, View, Button, StyleSheet, Dimensions } from 'react-native';

export default class GroceryList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false
        };
    }

    render() {

        return(
            <View style={styles.container}>
                <View style={styles.container}>
                    <Text>hi</Text>
                    <Button
                        onPress={() => this.setState({modalVisible: true})}
                        title="PURCHASE ITEM"
                        color="#841584"
                    />
                </View>
                <View style={styles.modalContainer}>
                    <Modal
                        visible = {this.state.modalVisible}
                        animationType={'slide'}
                        onRequestClose={() => this.setState({modalVisible: false})}
                    >
                        <View style={styles.modalContainer}>
                            <View style={styles.innerContainer}>
                                <Text>This is content inside of modal component</Text>
                                <Button
                                    onPress={() => this.setState({modalVisible: false})}
                                    title="Add to cart"
                                />
                            </View>
                        </View>
                    </Modal>
                </View>
            </View>
        );
    }
}

var height = Dimensions.get('window').height;

const styles = StyleSheet.create({
    container:{
        flex: 1,
        height: height,
        justifyContent: 'center',
        alignItems: 'center',
    },
    buttonContainer: {
        //margin: 20,
    },
    modalContainer: {
        flex: 1,
        justifyContent: 'center',
        flexDirection: 'column',
        backgroundColor: 'grey',
        alignItems: 'center',
    },
    innerContainer: {
        alignItems: 'center',
        backgroundColor: 'white',
        padding: 30,
    },
})