何时使用TouchableNativeFeedback，TouchableHighlight或TouchableOpacity？

Question

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

• TouchableNativeFeedback仅限Android，“将视图替换为另一个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

我认为Docs中所述的主要本质区别是：

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用于使视图正确响应的包装器   触动。按下时，包裹视图的不透明度降低，   它允许底衬颜色显示，变暗或着色   观点。

     

底层来自将孩子包裹在新视图中，可以   影响布局，有时会导致不需要的视觉瑕疵   正确使用，例如，如果包装视图的backgroundColor   未明确设置为不透明颜色。

<强> TouchableOpacity

  

TouchableOpacity＃一个用于使视图正确响应的包装器   触动。按下时，包裹视图的不透明度降低，   调暗它。

Answer 4

如果你想

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