React Native 리액트 네이티브 - TouchableOpacity

리액트 네이티브에선 일반적으로 사용되는 버튼 요소 두 가지가 있다. 

 

TouchableOpacity wrapper과 Button element이다.

 

하지만, 강의 중에서 실제론  TouchableOpacity wrapper 사용할 일이 더 많을 거란 이야기를 들었고, 살짝 TouchableOpacity와 Button의 점에 대해 궁금증이 일었다. 

 

THE Button Element

 

React Native Doc 에 따르면

 

Button element 는 모든 플랫폼에서 잘 렌더링되어야 하는 버튼이며, 최소 수준의 커스터마이징을 지원한다. 

 

버튼 요소를 단순하기 때문에, 표준 버튼이 필요할 경우 사용할 수 있고, 크기, 색상을 변경할 수 있으며, 어플리케이션에 추가하는 즉시 사용이 가능하게끔 설계 되어 있는 것으로 보인다. 하지만, Button 컴포넌트는 안드로이드와 ios에서 다르게 보이기 때문에 관리하는데에 어려움이 있다.

 

왼쪽) iOS Button, 오른쪽) Android Button

 

The TouchableOpacity Wrapper

 

마찬가지로, React Native Doc 에 따르면 

 

터치에 적절하게 반응하게끔 만드는 래퍼이다. 터치하면 그에 맞는 효과가 있다.

 

TouchableOpacity wrapper는 그 안에 담긴 모든 요소에 터치효과를 준다. 텍스트, 이미지 어느것이던 관계가 없으며, 기본적인 스타일이 지원되지 않아 처음부터 스타일링 해주어야 한다. 

 

왼쪽) iOS TouchableOpacity , 오른쪽) Android TouchableOpacity

이렇듯 CSS가 초기화 된 모습으로 나타나기에 style을 직접 주어야 한다. 

 

const TestScreen = () => {
  return (
    <View>
      <TouchableOpacity
        onPress={() => console.log("touchable opacity pressed")}
      >
        <Text>TouchableOpacityTest</Text>
      </TouchableOpacity>
    </View>
  )
}

 

const styles = StyleSheet.create({
  button: {
    alignItems: "center",
    backgroundColor: "blue",
    padding: 10
  },
  text: {
    color: "white"
  }
})

 

아래는 위의 STYLE을 적용 한 후이다. 

 

iOs, Android 모두 공평한 Touchable Opacity