Eojin Han

컴포넌트간 flow 연계

지도(PNaverMap) → 마커 → 요약정보 모달(PModalSummary)→ 주차장 상세정보 페이지(PDetails)

구현 영상

[ 마커 → 모달 연계]

마커를 클릭했을 때 요약정보 모달이 떠야하므로, setModalVisible을 넘겨받는다.


//PMain.js
...

// 지도 상의 마커 클릭 시 모달 올라오게끔 하기 위한 상태 선언.
const [modalVisible, setModalVisible] = useState(false);

...

// 지도의 마커와 모달의 동작을 연계시키기 위해 set 함수를 전달함.
<PNaverMap setModalVisible={setModalVisible}/>

...


//PNaverMap.js

export function PNaverMap({setModalVisible}) {
    const P0 = { latitude: 37.564362, longitude: 126.977011 };

    return (
        <NaverMapView style={{ width: '100%', height: '100%' }}
            showsMyLocationButton={true}
            center={{ ...P0, zoom: 16 }}
        onTouch={e => console.warn('onTouch', JSON.stringify(e.nativeEvent))}
        onCameraChange={e => console.warn('onCameraChange', JSON.stringify(e))}
        onMapClick={e => console.warn('onMapClick', JSON.stringify(e))}
        useTextureView
        >

            <Marker coordinate={P0} onClick={() => setModalVisible(true)} />
 
        </NaverMapView>
    );
}

[모달 버튼 → 주차장 상세정보 페이지 연계]

모달의 특정 버튼이 눌렸을 때, 주차장 상세정보 페이지로 넘어가야하므로,

PMain.js에서 PModalSummary.js로 navigation.navigate('PDetails') 함수를 넘겨야 한다.


//PMain.js

...

{/* 서머리 모달 */}
<PModalSummary
	modalVisible={modalVisible}
	setModalVisible={setModalVisible}
	viewDetail={() => {navigation.navigate('PDetails'); setModalVisible(false)}}
/>


//PModalSummary.js
...

<TouchableHighlight
    style={{ ...styles.openButton, backgroundColor: "#009900" }}
    onPress={viewDetail}
>
    <Text style={styles.textStyle}>주차장 상세정보</Text>
</TouchableHighlight>
...