경완

[ReactNative] pointerEvents, 자식만 클릭 가능하게 하기 본문

code&design/오류 해결

[ReactNative] pointerEvents, 자식만 클릭 가능하게 하기

gangwan 2024. 2. 27. 23:51

 

pBodies:{
display: 'flex',
flexDirection: 'column',
gap: 8,
pointerEvents: 'box-none',
},

 

'none'으로 설정할 경우 자식요소까지 모두 클릭이 불가능하다.

클릭을 가능하게 할 자식요소만 놔두고, 그 자식요소의 모든 부모에게 box-none속성을 부여하면

부모의 클릭은 무시한 채로 자식만 클릭 가능하게 할 수 있다.

 

 

-

밑에 보이는 내위치 버튼을 클릭하게 하고 싶은데,

위치를 잡기 위해 넣은 부모 flex 컨테이너가 클릭을 방해해서 밑에 있는 지도가 클릭이 안됐다.

위 방법을 통해 내위치 버튼만 클릭 가능하고, 나머지 영역에서는 맵으로 클릭이 인식되도록 했다.