[react-native] TouchableNativeFeedback, TouchableHighlight 또는 TouchableOpacity를 언제 사용합니까?

기본 반응에서,이 버튼을 만들기 위해 적어도 세 가지 방법은 다음과 같습니다 TouchableNativeFeedback, TouchableHighlight그리고 TouchableOpacity. 또한 TouchableWithoutFeedback“언론에 반응하는 모든 요소는 터치시 시각적 피드백을 가져야하기 때문에”사용해서는 안된다고 문서에 명확하게 명시되어 있습니다.

세 가지 사이에 다른 중요한 차이점이 있습니까? 그들 중 하나가 goto 구성 요소입니까? 어떤 경우에는 당신은 사용해야 TouchableHighlight이상 TouchableOpacity? 성능에 영향이 있습니까?

지금 애플리케이션을 작성하고 있는데 세 가지 모두 탭과 동작 사이에 상당한 지연이 있음을 발견했습니다 (이 경우 탐색 변경). 더 빨리 만들 수있는 방법이 있습니까?



답변

출처 : https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472 , by Nick Wientge

TouchableHighlight

• 기능 : 누르면 요소의 배경이 어둡거나 밝아집니다.

• 사용시기 : iOS에서 단색 모양 또는 배경이있는 터치 가능한 요소 또는 버튼 및 ListView 항목에 사용됩니다.

TouchableOpacity

• 기능 : 눌렀을 때 전체 요소의 불투명도를 밝게합니다.

• 사용시기 : iOS에서 배경색이없는 독립 실행 형 텍스트 또는 아이콘 인 터치 가능한 요소.

TouchableNativeFeedback

• 기능 : 눌렀을 때 배경에 잔물결 효과를 추가합니다.

• 사용시기 : 거의 모든 터치 가능한 요소에 대해 Android에서.


답변

글쎄, 이것은 일반적으로 무엇을 사용할지 결정하는 방법입니다.

  • Android 전용으로 빌드하고 구성 요소가 충분히 커서 기본 피드백이 다른 피드백을 사용하는 것과 눈에 띄게 다를 경우 다음을 사용합니다. TouchableNativeFeedback
  • 구성 요소의 불투명도를 제어하고 싶거나 버튼을 터치했을 때 색상을 갖기를 원하고 Touchable 내부의 일부 요소에 초점을 맞춘 상태를 제어하고 싶지 않은 경우 TouchableHighlight. ( TouchableOpacity불투명도를 직접 조절할 때 이상한 부분이 있습니다).
  • 다른 모든 경우에 사용 TouchableOpacity합니다.TouchableHighlight


답변

문서에 명시된 주요 차이점은 다음과 같습니다.

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.링크

터치 가능

TouchableHighlight 뷰가 터치에 적절히 반응하도록 만들기위한 래퍼입니다. 아래로 누르면 래핑 된 뷰의 불투명도가 감소하여 언더 레이 색상이 뷰를 통해 보이게하거나 어둡게하거나 틴팅 할 수 있습니다.

언더 레이는 레이아웃에 영향을 줄 수있는 자식을 새보기로 래핑하여 제공되며, 래핑 된보기의 backgroundColor가 명시 적으로 불투명 한 색상으로 설정되지 않은 경우와 같이 올바르게 사용되지 않으면 원치 않는 시각적 아티팩트가 발생할 수 있습니다.

TouchableOpacity

TouchableOpacity # 뷰가 터치에 적절하게 반응하도록 만들기위한 래퍼. 아래로 누르면 래핑 된 뷰의 불투명도가 감소하여 흐리게 표시됩니다.


답변

당신이 원한다면

  • 누를 때 강조 버튼 — 사용 TouchableHighlight
  • 누를 때 버튼의 불투명도 변경 — 사용 TouchableOpacity


답변