touchablehighlight

id: touchablehighlight title: TouchableHighlight

터치 기반 입력을 더 포괄적이고 미래 지향적으로 처리하려면 Pressable API를 확인해 보길 권한다.

TouchableHighlight는 뷰가 터치에 적절히 반응하도록 하는 래퍼 컴포넌트다. 터치가 시작되면 래핑된 뷰의 투명도가 낮아지며, 이로 인해 배경색이 드러나 뷰가 어두워지거나 색조가 변한다.

배경색은 자식 컴포넌트를 새로운 View로 래핑하여 구현한다. 이때 레이아웃에 영향을 미칠 수 있으며, 래핑된 뷰의 backgroundColor가 불투명한 색상으로 명시적으로 설정되지 않으면 원치 않는 시각적 문제가 발생할 수 있다.

TouchableHighlight는 반드시 하나의 자식 컴포넌트를 가져야 한다. 여러 자식 컴포넌트를 사용하려면 View로 감싸야 한다.

tsx

function MyComponent(props: MyComponentProps) {
  return (
    <View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableHighlight
  activeOpacity={0.6}
  underlayColor="#DDDDDD"
  onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableHighlight>;

예제

참조

Props

TouchableWithoutFeedback Props

TouchableWithoutFeedback Props를 상속받는다.

---

activeOpacity

터치가 활성화되었을 때 래핑된 뷰의 투명도를 결정한다. 값은 0과 1 사이여야 한다. 기본값은 0.85이다. underlayColor가 설정되어 있어야 한다.

타입
number

onHideUnderlay

언더레이가 숨겨진 직후에 호출된다.

타입
function

onShowUnderlay

언더레이가 표시된 직후에 호출된다.

타입
function

style

타입
View.style

underlayColor

터치가 활성 상태일 때 표시되는 배경색을 지정한다.

타입
color

hasTVPreferredFocus

iOS

(Apple TV 전용) TV 우선 포커스 (View 컴포넌트 문서 참조).

타입
bool

nextFocusDown

Android

TV에서 다음으로 포커스할 하위 엘리먼트를 지정한다 (View 컴포넌트 문서 참조).

타입
number

---

nextFocusForward

Android

TV에서 다음 포커스로 이동할 뷰를 지정한다 (View 컴포넌트 문서 참조).

타입
number

nextFocusLeft

Android

TV에서 다음 포커스가 왼쪽으로 이동하는 것을 정의한다. (View 컴포넌트에 대한 문서 참조).

타입
number

nextFocusRight

Android

TV에서 다음 오른쪽 포커스를 지정한다. (View 컴포넌트 문서 참조)

타입
number

nextFocusUp

Android

TV에서 다음 포커스 위로 이동하는 기능입니다 (View 컴포넌트 문서 참조).

타입
number

testOnly_pressed

스냅샷 테스트에 유용한 값이다.

타입
bool