react-native(리액트 네이티브) component - Modal

react-native(리액트 네이티브) component - Modal

import React, {Component} from 'react';

import {Modal, Text, TouchableHighlight, View, Alert} from 'react-native';

export default class ModalExample extends Component {

state = {

modalVisible: false,

animationType: 'slide',

transparentType: false,

};

setModalVisible_slide(visible) {

this.setState({modalVisible: visible});

this.setState({animationType: 'slide'});

};

setModalVisible_fade(visible) {

this.setState({modalVisible: visible});

this.setState({animationType: 'fade'});

};

setModalTransparent(transparent) {

this.setState({transparentType: transparent});

};

render() {

return (

<View style={{marginTop: 50}}>

<Modal

animationType={this.state.animationType}

transparent={this.state.transparentType}

visible={this.state.modalVisible}

onRequestClose={() => {

Alert.alert('Modal has been closed.');

}}>

<View style={{marginTop: 100}}>

<View>

<Text>Hello World!</Text>

<TouchableHighlight

onPress={() => {

this.setModalVisible_slide(!this.state.modalVisible);

}}>

<Text>Hide Modal</Text>

</TouchableHighlight>

<TouchableHighlight

onPress={() => {

this.setModalTransparent(!this.state.transparentType);

}}>

<Text>Control transparent</Text>

</TouchableHighlight>

</View>

</View>

</Modal>

<TouchableHighlight

onPress={() => {

this.setModalVisible_slide(true);

}}>

<Text>Show Modal_slide</Text>

</TouchableHighlight>

<TouchableHighlight

onPress={() => {

this.setModalVisible_fade(true);

}}>

<Text>Show Modal_fade</Text>

</TouchableHighlight>

</View>

);

}

}