何时使用 TouchableNativeFeedback、TouchableHighlight 或 TouchableOpacity？

Question

在 React Native 中，至少有三种方法可以制作按钮：TouchableNativeFeedback、TouchableHighlight 和 TouchableOpacity。还有TouchableWithoutFeedback，文档明确指出你不应该使用它，因为“所有响应按下的元素在触摸时都应该有视觉反馈”。

• TouchableNativeFeedback 仅适用于 Android，并且“将 View 替换为 RCTView 的另一个实例”
• TouchableHighlight "向视图层次结构添加视图"
• TouchableOpacity 工作“不改变视图层次”

这三者之间还有其他显着差异吗？其中之一是 goto 组件吗？在什么情况下应该使用TouchableHighlight 而不是TouchableOpacity？对性能有影响吗？

我现在正在编写一个应用程序，发现这三个应用程序在点击和操作之间都有明显的延迟（在本例中是导航更改）。有什么办法让它更快捷吗？

Answer 1

来源：https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472，作者 Nick Wientge

TouchableHighlight

• 作用：按下时使元素的背景变暗或变亮。

• 何时使用它：在 iOS 上用于具有实心形状或背景的可触摸元素或按钮，以及用于 ListView 项目。

TouchableOpacity

• 作用：按下时减轻整个元素的不透明度。

• 何时使用它：在 iOS 上，可触摸元素是独立的文本或没有背景颜色的图标。

TouchableNativeFeedback

• 作用：按下时在背景中添加涟漪效果。

• 何时使用：在 Android 上适用于几乎所有可触摸元素。

Answer 2

嗯，这就是我通常决定使用什么的方式：

• 如果我只为 Android 构建，并且组件足够大以至于本机反馈与使用其他组件明显不同，那么我使用 TouchableNativeFeedback
• 如果我想控制组件的不透明度或者我希望按钮在被触摸时具有颜色，并且我不想控制 Touchable 中某些元素的聚焦状态，那么我使用TouchableHighlight。 （当你自己控制不透明度时，TouchableOpacity 有一些奇怪的部分）。
• 在所有其他情况下，我使用TouchableOpacity，因为它比TouchableHighlight 更“裸”

Answer 3

我认为文档中所述的主要本质区别：

TouchableHighlight must have one child (not zero or more than one). If you wish to have several child components, wrap them in a View.link

TouchableHighlight

TouchableHighlight 使视图正确响应的包装器 触及。按下时，包裹视图的不透明度降低， 允许底层颜色透过、变暗或着色 视图。

underlay 来自将 child 包裹在一个新的 View 中，它可以 影响布局，如果不影响布局，有时会导致不需要的视觉伪影 正确使用，例如，如果包装视图的 backgroundColor 未明确设置为不透明颜色。

TouchableOpacity

TouchableOpacity # 使视图正确响应的包装器 触及。按下时，包裹视图的不透明度降低， 调暗它。

Answer 4

如果你愿意

• 按下时突出显示按钮 — 使用 TouchableHighlight
• 按下时更改按钮的不透明度 — 使用 TouchableOpacity