React native 모달( Modal )

import { View, TouchableHighlight,TouchableOpacity,Modal } from 'react-native'

// 모달 박스1
class CancelModel extends Component{

    state = {
        modalVisible: false,
    };

    setModalVisible(visible) {
        this.setState({ modalVisible: visible });
    }

    render() {
        return (
            <View
                style={{ flex: 1, backgroundColor: 'red' }}
            >
                <Modal
                    animationType="slide"
                    transparent={true} // 배경 투명 하게 
                    visible={this.state.modalVisible}

                    onRequestClose={() => {
                        Alert.alert('Modal has been closed.');
                    }}>

                    <View
                        style={{
                            flex: 1,
                            flexDirection: 'column',
                            justifyContent: 'center',
                            alignItems: 'center',
                            backgroundColor: 'rgba(0,0,0,0.50)'
                        }}
                    >
                        <View style={{
                            width: 300,
                            height: 200,
                            backgroundColor: 'white',
                            borderRadius: 20
                        }}>

                            <Text
                                style={{
                                    flex: 1.5,
                                    width: 300,
                                    backgroundColor: '#32C5E6',
                                    color: 'white',
                                    fontSize: 20,
                                    paddingLeft: 15,
                                    borderTopLeftRadius: 20,
                                    borderTopRightRadius: 20
                                }}
                            >알림</Text>

                            <Text
                                style={{ fontSize: 16, alignSelf: 'center', marginTop: 10, flex: 5, }}
                            >
                                이 페이지를 벗어나면, {"\n"}
                                작성중인 데이터가 모두 사라집니다.{"\n"}{"\n"}
                                페이지를 종료 하시겠습니까?
                            </Text>
                            <View
                                style={{
                                    alignSelf: 'baseline',
                                    backgroundColor: '#32C5E6',
                                    width: 300,
                                    flex: 2,
                                    borderBottomLeftRadius: 20,
                                    borderBottomRightRadius: 20,
                                    flexDirection: 'row'
                                }}
                            >
                                <TouchableHighlight
                                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}
                                    onPress={() => {
                                        this.setModalVisible(!this.state.modalVisible);
                                    }}>
                                    <Text
                                        style={{ color: 'white', fontSize: 15 }}
                                    >취소</Text>
                                </TouchableHighlight>

                                <TouchableHighlight
                                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
                                    onPress={() => {
                                        this.setModalVisible(!this.state.modalVisible);
                                    }}>
                                    <Text
                                        style={{ color: 'white', fontSize: 15 }}
                                    >종료</Text>
                                </TouchableHighlight>

                            </View>
                        </View>

                    </View>
                </Modal>

                <TouchableHighlight
                    onPress={() => {
                        this.setModalVisible(true);
                    }}>
                    <Text>Show Modal</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

// 모달 박스1

class CancelModel extends Component{

    state = {

        modalVisible: false,

    };

    setModalVisible(visible) {

        this.setState({ modalVisible: visible });

    }

    render() {

        return (

            <View

                style={{ flex: 1, backgroundColor: 'red' }}

            >

                <Modal

                    animationType="slide"

                    transparent={true} // 배경 투명 하게 

                    visible={this.state.modalVisible}

                    onRequestClose={() => {

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

                    }}>

                    <View

                        style={{

                            flex: 1,

                            flexDirection: 'column',

                            justifyContent: 'center',

                            alignItems: 'center',

                            backgroundColor: 'rgba(0,0,0,0.50)'

                        }}

                    >

                        <View style={{

                            width: 300,

                            height: 200,

                            backgroundColor: 'white',

                            borderRadius: 20

                        }}>

                            <Text

                                style={{

                                    flex: 1.5,

                                    width: 300,

                                    backgroundColor: '#32C5E6',

                                    color: 'white',

                                    fontSize: 20,

                                    paddingLeft: 15,

                                    borderTopLeftRadius: 20,

                                    borderTopRightRadius: 20

                                }}

                            >알림</Text>

                            <Text

                                style={{ fontSize: 16, alignSelf: 'center', marginTop: 10, flex: 5, }}

                            >

                                이 페이지를 벗어나면, {"\n"}

                                작성중인 데이터가 모두 사라집니다.{"\n"}{"\n"}

                                페이지를 종료 하시겠습니까?

                            </Text>

                            <View

                                style={{

                                    alignSelf: 'baseline',

                                    backgroundColor: '#32C5E6',

                                    width: 300,

                                    flex: 2,

                                    borderBottomLeftRadius: 20,

                                    borderBottomRightRadius: 20,

                                    flexDirection: 'row'

                                }}

                            >

                                <TouchableHighlight

                                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center', }}

                                    onPress={() => {

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

                                    }}>

                                    <Text

                                        style={{ color: 'white', fontSize: 15 }}

                                    >취소</Text>

                                </TouchableHighlight>

                                <TouchableHighlight

                                    style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}

                                    onPress={() => {

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

                                    }}>

                                    <Text

                                        style={{ color: 'white', fontSize: 15 }}

                                    >종료</Text>

                                </TouchableHighlight>

                            </View>

                        </View>

                    </View>

                </Modal>

                <TouchableHighlight

                    onPress={() => {

                        this.setModalVisible(true);

                    }}>

                    <Text>Show Modal</Text>

                </TouchableHighlight>

            </View>

        );

    }

}