Skip to main content

TouchableWithoutFeedback

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

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

除非有充分的理由，否则不要使用。所有响应按压的元素在触摸时都应该有视觉反馈。

¥Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched.

TouchableWithoutFeedback 仅抚养一个子级。如果你希望有多个子组件，请将它们封装在视图中。重要的是，TouchableWithoutFeedback 的工作原理是克隆其子级并向其应用响应者属性。因此，任何中间组件都需要通过这些 props 传递给底层的 React Native 组件。

¥TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View. Importantly, TouchableWithoutFeedback works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.

使用模式​

¥Usage Pattern

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

<TouchableWithoutFeedback onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableWithoutFeedback>;

示例​

¥Example

参考

¥Reference

属性​

¥Props

accessibilityIgnoresInvertColors​

类型
布尔值

accessible​

当 true 时，表示视图是辅助功能元素。默认情况下，所有可触摸元素都是可访问的。

¥When true, indicates that the view is an accessibility element. By default, all the touchable elements are accessible.

类型
bool

accessibilityLabel​

当用户与元素交互时覆盖屏幕阅读器读取的文本。默认情况下，标签是通过遍历所有子节点并累加所有以空格分隔的 Text 节点来构造的。

¥Overrides the text that's read by the screen reader when the user interacts with the element. By default, the label is constructed by traversing all the children and accumulating all the Text nodes separated by space.

类型
string

accessibilityLanguage
iOS
​

指示用户与元素交互时屏幕阅读器应使用哪种语言的值。它应该遵循 BCP 47 规范。

¥A value indicating which language should be used by the screen reader when the user interacts with the element. It should follow the BCP 47 specification.

请参阅 iOS accessibilityLanguage 文档 了解更多信息。

¥See the iOS accessibilityLanguage doc for more information.

类型
string

accessibilityHint​

可访问性提示可帮助用户了解当可访问性标签中的结果不明确时，他们对可访问性元素执行操作时会发生什么。

¥An accessibility hint helps users understand what will happen when they perform an action on the accessibility element when that result is not clear from the accessibility label.

类型
string

accessibilityRole​

accessibilityRole 将组件的用途传达给辅助技术的用户。

¥accessibilityRole communicates the purpose of a component to the user of an assistive technology.

accessibilityRole 可以是以下之一：

¥accessibilityRole can be one of the following:

  • 'none' - 当元素没有作用时使用。

    ¥'none' - Used when the element has no role.

  • 'button' - 当元素应被视为按钮时使用。

    ¥'button' - Used when the element should be treated as a button.

  • 'link' - 当元素应被视为链接时使用。

    ¥'link' - Used when the element should be treated as a link.

  • 'search' - 当文本字段元素也应被视为搜索字段时使用。

    ¥'search' - Used when the text field element should also be treated as a search field.

  • 'image' - 当元素应被视为图片时使用。例如，可以与按钮或链接组合。

    ¥'image' - Used when the element should be treated as an image. Can be combined with button or link, for example.

  • 'keyboardkey' - 当元素充当键盘按键时使用。

    ¥'keyboardkey' - Used when the element acts as a keyboard key.

  • 'text' - 当元素应被视为无法更改的静态文本时使用。

    ¥'text' - Used when the element should be treated as static text that cannot change.

  • 'adjustable' - 当元素可以是 "adjusted" 时使用（例如滑块）。

    ¥'adjustable' - Used when an element can be "adjusted" (e.g. a slider).

  • 'imagebutton' - 当元素应被视为按钮并且也是图片时使用。

    ¥'imagebutton' - Used when the element should be treated as a button and is also an image.

  • 'header' - 当元素充当内容部分的标题（例如导航栏的标题）时使用。

    ¥'header' - Used when an element acts as a header for a content section (e.g. the title of a navigation bar).

  • 'summary' - 当应用首次启动时，可以使用元素提供应用中当前状况的快速摘要时使用。

    ¥'summary' - Used when an element can be used to provide a quick summary of current conditions in the app when the app first launches.

  • 'alert' - 当元素包含要渲染给用户的重要文本时使用。

    ¥'alert' - Used when an element contains important text to be presented to the user.

  • 'checkbox' - 当元素表示可以选中、取消选中或具有混合选中状态的复选框时使用。

    ¥'checkbox' - Used when an element represents a checkbox which can be checked, unchecked, or have mixed checked state.

  • 'combobox' - 当元素表示组合框时使用，组合框允许用户在多个选项中进行选择。

    ¥'combobox' - Used when an element represents a combo box, which allows the user to select among several choices.

  • 'menu' - 当组件是选择菜单时使用。

    ¥'menu' - Used when the component is a menu of choices.

  • 'menubar' - 当组件是多个菜单的容器时使用。

    ¥'menubar' - Used when a component is a container of multiple menus.

  • 'menuitem' - 用于表示菜单中的项目。

    ¥'menuitem' - Used to represent an item within a menu.

  • 'progressbar' - 用于表示指示任务进度的组件。

    ¥'progressbar' - Used to represent a component which indicates progress of a task.

  • 'radio' - 用于表示单选按钮。

    ¥'radio' - Used to represent a radio button.

  • 'radiogroup' - 用于表示一组单选按钮。

    ¥'radiogroup' - Used to represent a group of radio buttons.

  • 'scrollbar' - 用来表示滚动条。

    ¥'scrollbar' - Used to represent a scroll bar.

  • 'spinbutton' - 用于表示打开选项列表的按钮。

    ¥'spinbutton' - Used to represent a button which opens a list of choices.

  • 'switch' - 用于表示可以打开和关闭的开关。

    ¥'switch' - Used to represent a switch which can be turned on and off.

  • 'tab' - 用于表示一个选项卡。

    ¥'tab' - Used to represent a tab.

  • 'tablist' - 用于表示选项卡列表。

    ¥'tablist' - Used to represent a list of tabs.

  • 'timer' - 用来表示计时器。

    ¥'timer' - Used to represent a timer.

  • 'toolbar' - 用于表示工具栏（操作按钮或组件的容器）。

    ¥'toolbar' - Used to represent a tool bar (a container of action buttons or components).

类型
string

accessibilityState​

向辅助技术的用户描述组件的当前状态。

¥Describes the current state of a component to the user of an assistive technology.

请参阅 无障碍指南 了解更多信息。

¥See the Accessibility guide for more information.

类型
目的：{disabled: bool, selected: bool, checked: bool or 'mixed', busy: bool, expanded: bool}

accessibilityActions​

辅助功能操作允许辅助技术以编程方式调用组件的操作。accessibilityActions 属性应包含操作对象的列表。每个操作对象应包含字段名称和标签。

¥Accessibility actions allow an assistive technology to programmatically invoke the actions of a component. The accessibilityActions property should contain a list of action objects. Each action object should contain the field name and label.

请参阅 无障碍指南 了解更多信息。

¥See the Accessibility guide for more information.

类型
array

aria-busy​

表示正在修改某个元素，并且辅助技术可能需要等到更改完成后再通知用户有关更新的信息。

¥Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update.

类型默认
booleanfalse

aria-checked​

指示可检查元素的状态。该字段可以采用布尔值或 "mixed" 字符串来表示混合复选框。

¥Indicates the state of a checkable element. This field can either take a boolean or the "mixed" string to represent mixed checkboxes.

类型默认
布尔值，'mixed'false

aria-disabled​

指示该元素可感知但已禁用，因此不可编辑或不可操作。

¥Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.

类型默认
booleanfalse

aria-expanded​

指示可展开元素当前是展开还是折叠。

¥Indicates whether an expandable element is currently expanded or collapsed.

类型默认
booleanfalse

aria-hidden​

指示此辅助功能元素中包含的辅助功能元素是否隐藏。

¥Indicates whether the accessibility elements contained within this accessibility element are hidden.

例如，在包含同级视图 A 和 B 的窗口中，在视图 B 上将 aria-hidden 设置为 true 会导致 VoiceOver 忽略视图 B 中的元素。

¥For example, in a window that contains sibling views A and B, setting aria-hidden to true on view B causes VoiceOver to ignore the elements in the view B.

类型默认
booleanfalse

aria-label​

定义一个标记交互元素的字符串值。

¥Defines a string value that labels an interactive element.

类型
string

aria-live
Android
​

指示将更新的元素，并描述用户代理、辅助技术和用户可以从实时区域期望的更新类型。

¥Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.

  • off 辅助服务不应宣布对此视图的更改。

    ¥off Accessibility services should not announce changes to this view.

  • 礼貌的无障碍服务应该宣布对此视图的更改。

    ¥polite Accessibility services should announce changes to this view.

  • 自信的辅助服务应该中断正在进行的演讲，立即宣布对此视图的更改。

    ¥assertive Accessibility services should interrupt ongoing speech to immediately announce changes to this view.

类型默认
enum('assertive', 'off', 'polite')'off'

aria-modal
iOS
​

布尔值，指示 VoiceOver 是否应忽略视图中与接收者同级的元素。优先于 accessibilityViewIsModal 属性。

¥Boolean value indicating whether VoiceOver should ignore the elements within views that are siblings of the receiver. Has precedence over the accessibilityViewIsModal prop.

类型默认
booleanfalse

aria-selected​

指示当前是否选择了可选元素。

¥Indicates whether a selectable element is currently selected or not.

类型
boolean

onAccessibilityAction​

当用户执行辅助功能操作时调用。该函数的唯一参数是一个包含要执行的操作名称的事件。

¥Invoked when the user performs the accessibility actions. The only argument to this function is an event containing the name of the action to perform.

请参阅 无障碍指南 了解更多信息。

¥See the Accessibility guide for more information.

类型
function

accessibilityValue​

表示组件的当前值。它可以是组件值的文本描述，或者对于基于范围的组件（例如滑块和进度条），它包含范围信息（最小值、当前和最大值）。

¥Represents the current value of a component. It can be a textual description of a component's value, or for range-based components, such as sliders and progress bars, it contains range information (minimum, current, and maximum).

请参阅 无障碍指南 了解更多信息。

¥See the Accessibility guide for more information.

类型
目的：{min: number, max: number, now: number, text: string}

aria-valuemax​

表示基于范围的组件（例如滑块和进度条）的最大值。优先于 accessibilityValue 属性中的 max 值。

¥Represents the maximum value for range-based components, such as sliders and progress bars. Has precedence over the max value in the accessibilityValue prop.

类型
number

aria-valuemin​

表示基于范围的组件（例如滑块和进度条）的最小值。优先于 accessibilityValue 属性中的 min 值。

¥Represents the minimum value for range-based components, such as sliders and progress bars. Has precedence over the min value in the accessibilityValue prop.

类型
number

aria-valuenow​

表示基于范围的组件（例如滑块和进度条）的当前值。优先于 accessibilityValue 属性中的 now 值。

¥Represents the current value for range-based components, such as sliders and progress bars. Has precedence over the now value in the accessibilityValue prop.

类型
number

aria-valuetext​

表示组件的文本描述。优先于 accessibilityValue 属性中的 text 值。

¥Represents the textual description of the component. Has precedence over the text value in the accessibilityValue prop.

类型
string

delayLongPress​

从 onPressIn 到调用 onLongPress 之前的持续时间（以毫秒为单位）。

¥Duration (in milliseconds) from onPressIn before onLongPress is called.

类型
number

delayPressIn​

从触摸开始到调用 onPressIn 之前的持续时间（以毫秒为单位）。

¥Duration (in milliseconds), from the start of the touch, before onPressIn is called.

类型
number

delayPressOut​

调用 onPressOut 之前从触摸释放开始的持续时间（以毫秒为单位）。

¥Duration (in milliseconds), from the release of the touch, before onPressOut is called.

类型
number

disabled​

如果为 true，则禁用该组件的所有交互。

¥If true, disable all interactions for this component.

类型
bool

hitSlop​

这定义了你的触摸可以从按钮开始多远。当离开按钮时，该值会添加到 pressRetentionOffset。

¥This defines how far your touch can start away from the button. This is added to pressRetentionOffset when moving off of the button.

触摸区域永远不会超出父视图边界，并且如果触摸击中两个重叠视图，则同级视图的 Z 索引始终优先。

¥The touch area never extends past the parent view bounds and the Z-index of sibling views always takes precedence if a touch hits two overlapping views.

类型
矩形 或号码

id​

用于从原生代码中定位此视图。优先于 nativeID 属性。

¥Used to locate this view from native code. Has precedence over nativeID prop.

类型
string

onBlur​

当项目失去焦点时调用。

¥Invoked when the item loses focus.

类型
function

onFocus​

当项目获得焦点时调用。

¥Invoked when the item receives focus.

类型
function

onLayout​

在安装和布局更改时调用。

¥Invoked on mount and on layout changes.

类型
({nativeEvent: LayoutEvent}) => void

onLongPress​

如果 onPressIn 之后的时间持续超过 370 毫秒，则调用。该时间段可以使用 delayLongPress 进行定制。

¥Called if the time after onPressIn lasts longer than 370 milliseconds. This time period can be customized with delayLongPress.

类型
function

onPress​

当触摸被释放时调用，但如果取消则不会调用（例如通过滚动窃取响应者锁）。第一个函数参数是 PressEvent 形式的事件。

¥Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock). The first function argument is an event in form of PressEvent.

类型
function

onPressIn​

一旦按下可触摸元素就会调用，甚至在 onPress 之前调用。这在发出网络请求时非常有用。第一个函数参数是 PressEvent 形式的事件。

¥Called as soon as the touchable element is pressed and invoked even before onPress. This can be useful when making network requests. The first function argument is an event in form of PressEvent.

类型
function

onPressOut​

一旦触摸被释放，甚至在 onPress 之前调用。第一个函数参数是 PressEvent 形式的事件。

¥Called as soon as the touch is released even before onPress. The first function argument is an event in form of PressEvent.

类型
function

pressRetentionOffset​

当滚动视图被禁用时，这定义了在停用按钮之前你的触摸可以离开按钮的距离。停用后，尝试将其移回来，你会看到该按钮再次重新激活！禁用滚动视图时，将其来回移动几次。确保传入常量以减少内存分配。

¥When the scroll view is disabled, this defines how far your touch may move off of the button, before deactivating the button. Once deactivated, try moving it back and you'll see that the button is once again reactivated! Move it back and forth several times while the scroll view is disabled. Ensure you pass in a constant to reduce memory allocations.

类型
矩形 或号码

nativeID​

类型
string

testID​

用于在端到端测试中定位此视图。

¥Used to locate this view in end-to-end tests.

类型
string

touchSoundDisabled
Android
​

如果为 true，则触摸时不会播放系统声音。

¥If true, doesn't play a system sound on touch.

类型
布尔值