ReactNative弹出Modal对话框

const RootStackWithModal = createStackNavigator(
    {
        Main: {
            screen: RootNavigator,
        },
        ParticipantModal: {
            screen: ParticipantModal,
        },
    },
    {
        mode: 'modal',
        headerMode: 'none',
        cardStyle: {
            backgroundColor: 'rgba(0, 0, 0, 0)',
            opacity: 1
        },
        transitionConfig: () => ({
            containerStyle: {
                backgroundColor: 'rgba(0, 0, 0, 0)'
            }
        })
    }
);
export default AppContainer = createAppContainer(RootStackWithModal);

import {Modal, Text, TouchableHighlight, View, Dimensions} from "react-native";
import React from "react";

export default class ParticipantModal extends React.Component {
    render() {
        return (
            <Modal
                transparent={true}
                onRequestClose={() => {
                    alert("Modal has been closed.");
                }}
            >
                <View style={{
                    height: Dimensions.get('window').height,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: 'rgba(0,0,0,0.5)'
                }}>
                    <View style={{height: 250, width: 300, margin: 20, backgroundColor: 'white'}}>
                        <View style={{
                            flex: 1,
                            justifyContent: 'center',
                            alignItems: 'center',
                            borderWidth: 1,
                            borderColor: '#eee'
                        }}>
                            <Text>Hello World!</Text>
                        </View>
                        <TouchableHighlight
                            onPress={() => {
                                this.props.navigation.goBack()
                            }}
                            style={{height: 50, justifyContent: 'center', alignItems: 'center'}}
                        >
                            <Text>Hide Modal</Text>
                        </TouchableHighlight>
                    </View>
                </View>
            </Modal>);
    }
}

来源：https://my.oschina.net/sfshine/blog/3103363