Skip to main content

TouchableHighlight

如果你正在寻找更广泛且面向未来的方法来处理基于触摸的输入，请查看 Pressable API。

¥If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

使视图正确响应触摸的封装器。按下时，封装视图的不透明度会降低，从而允许底层颜色显示出来，使视图变暗或着色。

¥A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, which allows the underlay color to show through, darkening or tinting the view.

底层来自将子视图封装在新视图中，这可能会影响布局，如果使用不正确，有时会导致不必要的视觉伪像，例如，如果封装视图的背景颜色未显式设置为不透明颜色。

¥The underlay comes from wrapping the child in a new View, which can affect layout, and sometimes cause unwanted visual artifacts if not used correctly, for example if the backgroundColor of the wrapped view isn't explicitly set to an opaque color.

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.

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>;

示例​

¥Example

参考

¥Reference

属性​

¥Props

TouchableWithoutFeedback 属性​

¥TouchableWithoutFeedback Props

继承 TouchableWithoutFeedback 属性。

¥Inherits TouchableWithoutFeedback Props.

activeOpacity​

确定触摸处于活动状态时封装视图的不透明度应为多少。该值应介于 0 和 1 之间。默认为 0.85。需要设置 underlayColor。

¥Determines what the opacity of the wrapped view should be when touch is active. The value should be between 0 and 1. Defaults to 0.85. Requires underlayColor to be set.

类型
number

onHideUnderlay​

隐藏底层后立即调用。

¥Called immediately after the underlay is hidden.

类型
function

onShowUnderlay​

显示底层后立即调用。

¥Called immediately after the underlay is shown.

类型
function

style​

类型
View.style

underlayColor​

触摸处于活动状态时将显示的底层颜色。

¥The color of the underlay that will show through when the touch is active.

类型
color

hasTVPreferredFocus
iOS
​

（仅限苹果电视）TV 首选焦点（请参阅 View 组件的文档）。

¥(Apple TV only) TV preferred focus (see documentation for the View component).

类型
bool

nextFocusDown
Android
​

接下来电视焦点向下（请参阅查看组件的文档）。

¥TV next focus down (see documentation for the View component).

类型
number

nextFocusForward
Android
​

TV 下一个焦点向前（请参阅 View 组件的文档）。

¥TV next focus forward (see documentation for the View component).

类型
number

nextFocusLeft
Android
​

TV 的下一个焦点向左（请参阅 View 组件的文档）。

¥TV next focus left (see documentation for the View component).

类型
number

nextFocusRight
Android
​

电视下一个焦点向右（请参阅查看组件的文档）。

¥TV next focus right (see documentation for the View component).

类型
number

nextFocusUp
Android
​

接下来聚焦电视（请参阅查看组件的文档）。

¥TV next focus up (see documentation for the View component).

类型
number

testOnly_pressed​

方便进行快照测试。

¥Handy for snapshot tests.

类型
bool