ReactNative彈出Modal對話方塊
阿新 • • 發佈:2019-09-08
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>