TouchableNativeFeedback, TouchableHighlight 또는 TouchableOpacity를 언제 사용합니까?

94

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

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

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

react-native 
— Damusnet
소스
4
snappiness에 관한 한 ... console.log에 출력하면 장면 전환이 상당히 느려집니다. 나는 React Native로 시작하고 있으며 첫 번째 구성 요소를 개발하는 동안 속도에 다소 감명을받지 못했습니다. 모든 console.log 명령 (redux 로거 비활성화 포함)을 제거하고 릴리스 대상을 위해 빌드했으며 속도가 날 놀라게했습니다. 이것은 Cordova 앱 개발에서 비롯됩니다.
— Travis White

답변:

115

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

TouchableHighlight

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

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

TouchableOpacity

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

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

TouchableNativeFeedback

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

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

— 에단 체 트리트
소스
감사합니다! 그 이후로이 기사를 읽었지만 더 이상 내 질문에 답할 수 없었습니다. 내가 찾던 바로 그것입니다.
— damusnet
1
TouchableNativeFeedback을 사용할 때이 사각형 배경이 있습니다 (잔물결을 의미하지는 않습니다). 어떻게 사용자 정의합니까 (예 : 크기를 늘리거나 둥글게 만들거나 제거하고 잔물결 만 포함)?
— Yasir는
8

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

  • Android 전용으로 빌드하고 구성 요소가 충분히 커서 기본 피드백이 다른 피드백을 사용하는 것과 눈에 띄게 다를 경우 다음을 사용합니다. TouchableNativeFeedback
  • 구성 요소의 불투명도를 제어하고 싶거나 버튼을 터치했을 때 색상을 갖기를 원하고 Touchable 내부의 일부 요소에 초점을 맞춘 상태를 제어하고 싶지 않은 경우 TouchableHighlight. ( TouchableOpacity불투명도를 직접 조절할 때 이상한 부분이 있습니다).
  • 다른 모든 경우에 사용 TouchableOpacity합니다.TouchableHighlight
— Mienaikoe
소스
1
이 답변은 도움이되는 시작입니다.하지만 서로를 사용해야하는 이유에 대한보다 확실한 기술 및 / 또는 디자인 관련 이유를 찾고 싶었습니다.
— 보 스미스
2

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

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

— 모하메드 살레
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.