React Native 안드로이드에서 absolute의 Touchable이 작동하지 않을 때

개발이슈

stackoverflow.com/questions/36938742/touchablehighlight-not-clickable-if-position-absolute%EF%BB%BF

Touchablehighlight not clickable if position absolute

 

React Native Touchable요소들에 absolute를 먹였을때 터치되지 않거나 혹은 되려 뒷 요소들이 터치되는 기현상이 발생한다.

안드로이드에서 리액트 네이티브는 뒷 코드가 앞 코드 위에 얹어지는 구조로 렌더링된다.

<TouchableHighLight><Text>Click me</Text></TouchableHighlight>  
<View> .... </View>

여기서 우리는 TouchableHighLight의 position:absolute하고 zIndex와 elevation을 999로 주면 View위에 Touchable이 올라간다고 생각할 수 있다. 실제로 보이는 화면은 그렇게 보인다. 그러나 실제로는 View가 Touchable 위에 그려지게 되며 따라서 Touchable이 아무 터치가 안되고 되려 View의 요소들이 터치되는 것이다.

따라서 이걸 아래와 같이 해결하면 Touchable이 정상작동함을 확인할 수 있다.

<View>...</View>  
<TouchableHighLight><Text>Click me</Text></TouchableHighlight\>

실제 터치되어야 하는 요소를 밑에 두는 것이다.