[React Native] 팝업창 띄우기

1. 팝업창 역할을 할 Component 제작

  -> import Modal from 'react-native-modalbox'

     

위와 같이 Modal 을 modalbox로부터 import해와 아래처럼 컴포넌트의 메인 View로 만들기

 

render() {

    return (
        <Modal ref={'myModal'}
               style={modalStyles.modalStyle}
               position='center'
               backdrop={true}
               onClosed={()=>{
                   alert("modal closed");
               }}
        >
            <Text style={modalStyles.textStyle}>New Info</Text>
            <TextInput style={modalStyles.inputStyle}
                       placeholder="text input1"
                       onChangeText={(text)=>this.setState({text1:text})}
            />
            <Text style={modalStyles.textStyle}>New Info</Text>
            <TextInput style={modalStyles.inputStyle}
                       placeholder="text input2"
                       onChangeText={(text)=>this.setState({text2:text})}
            />
            <Button title={"Add"} onPress={()=>this.addNew()}/>
        </Modal>
    );
}

 

2. 팝업창 컴포넌트 내에 Modal을 실행시킬 기능 탑재

showAddModal = () =>{
    this.refs.myModal.open();
};

 

3. 메인 화면에서 팝업창을 준비시킴. -> render 내에 아래와 같이 팝업창 컴포넌트 추가(ref를 통해 4.번과 연결)

★★여기서 parentView는 custom props로, 여기에 this를 넣음으로서 Popup에서 this.props.parentView를 불러옴에 따라 메인 화면의 기능들을 사용할 수 있다.

<Popup ref={"popup"} parentView={this}/>

 

4. 팝업창을 띄울 기능 만들기

onPressAdd(){
    this.refs.popup.showAddModal();
}

 

 

 

혹은 차선택으로 좋은 git이 있다.

https://github.com/jacklam718/react-native-popup-dialog 참고.