[React-Native] Props로 받은 값으로 Modal 구현하기

Modal 구현할 때마다 방황하는 내가 싫어 제대로 포스팅한다 !!!!

 

 

✅ 모달을 띄우는 부울 값

this.state = {
            number: null,
            modal: false,
        }

  handleModal = () => {
        this.setState({
            modal: this.state.modal ? false : true,
        });
    };

 

✅ 상품등록 버튼 시 모달을 띄워야 하므로 onPress 시 handleModal 함수 부르기

<TouchableOpacity activeOpacity={0.8} style={styles.btn} onPress={this.handleModal}>
    <Text style={styles.btn_text}>상품등록하기</Text>
</TouchableOpacity>

 

 

✅ class SearchModal에 Props로 전달할 값들 선언

{this.state.modal && (<SearchModal number={this.state.number} statemodal={this.state.modal}
                      setstatemodal={() => this.setState({ modal: this.state.modal ? false : true })} />)}

 

✅ SearchModal 에서 Modal 구현해주기

<Modal animationType='slide' transparent={true} visible={this.props.statemodal}>
                    <View style={styles.centeredSearchView}>
                        <View style={styles.modalSearchView}>
                            <TouchableOpacity onPress={this.props.setstatemodal} style={styles.modalText}>
                                <Text style={styles.textSSTTYYLLE}>X</Text>
                            </TouchableOpacity>
                            <Text style={styles.title}>
                                {"부품번호 : "}{this.props.number}{"\n"}
                            </Text>
                            <TouchableOpacity onPress={this.props.upload}>
                                <Icon name="check" size={35} color="black" />
                            </TouchableOpacity>
                        </View>
                    </View>
                </Modal>

setstatemodal을 props로 받아 x버튼 클릭 시 modal을 닫아줌

 

 

- visible

모달 화면을 보이게 할 것인지 숨길 것인지를 결정하는 속성

visible을  true로 하면 모달 화면이 뜨고, false로 하면 모달 화면이 보이지 않습니다.

 

- transparent

모달 화면을 투명하게 할 것인지를 결정하는 속성

 

구현화면

 

모달 구현을 위한 최소한의 코드만을 포스팅하여 조금 다를 수 있음 주의 !  참고만 해주세여