touchablehighlight

id: touchablehighlight title: TouchableHighlight

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

터치에 적절히 반응하는 뷰를 만들기 위한 래퍼입니다. 눌렀을 때 래핑된 뷰의 불투명도가 감소하며, 이로 인해 배경색이 비춰져 뷰가 어두워지거나 색조가 바뀝니다.

이 배경색은 자식 뷰를 새로운 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에서 다음 포커스 아래로 이동하는 기능(뷰 컴포넌트에 대한 문서 참조).

타입
number

nextFocusForward

Android

TV에서 다음 포커스를 앞으로 이동시킬 때 사용한다 (View 컴포넌트의 문서 참조).

타입
number

nextFocusLeft

Android

TV 왼쪽 포커스 이동 (View 컴포넌트 문서 참조).

타입
number

nextFocusRight

Android

TV에서 다음으로 포커스를 오른쪽으로 이동하는 기능 (View 컴포넌트의 문서 참조).

타입
number

---

nextFocusUp

Android

TV에서 다음 포커스 위로 이동 (View 컴포넌트 문서 참조).

타입
number

testOnly_pressed

스냅샷 테스트에 유용하게 사용한다.

타입
bool