跳到主要內容

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 下一個焦點向下（請參閱 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