何时使用 TouchableNativeFeedback、TouchableHighlight 或 TouchableOpacity? [英] When to use TouchableNativeFeedback, TouchableHighlight or TouchableOpacity?

问题描述

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

In React Native, there are at least three ways to make a button: TouchableNativeFeedback, TouchableHighlight and TouchableOpacity. There is also TouchableWithoutFeedback, which the documentation clearly states you should not use because "all the elements that respond to press should have a visual feedback when touched".

• TouchableNativeFeedback 仅适用于 Android，并且将视图替换为另一个RCTView 实例"
• TouchableHighlight将视图添加到视图层次结构"
• TouchableOpacity无需改变视图层次结构"

• TouchableNativeFeedback is Android only and "replaces the View with another instance of RCTView"
• TouchableHighlight "adds a view to the view hierarchy"
• TouchableOpacity works "without changing the view hierarchy"

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

Are there any other significant differences between the three? Is one of them the goto component? In what case should you use TouchableHighlight over TouchableOpacity? Are there any performance implications?

我现在正在编写一个应用程序，发现这三个应用程序在点击和操作之间都有明显的延迟(在这种情况下是导航更改).有什么办法可以让它更活泼吗?

I am writing an application right now, and find that all three have a significant delay between tap and the action (in this case a navigation change). Is there any way to make it snappier?

推荐答案

来源:https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472，由 Nick Wientge 撰写

source: https://medium.com/differential/better-cross-platform-react-native-components-cb8aadeba472, by Nick Wientge

TouchableHighlight

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

• What it does: Darkens or lightens the background of the element when pressed.

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

• When to use it: On iOS for touchable elements or buttons that have a solid shape or background, and on ListView items.

TouchableOpacity

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

• What it does: Lightens the opacity of the entire element when pressed.

• 何时使用:在 iOS 上用于作为独立文本或没有背景颜色的图标的可触摸元素.

• When to use it: On iOS for touchable elements that are standalone text or icons with no background color.

TouchableNativeFeedback

• 作用:按下时为背景添加涟漪效果.

• What it does: Adds a ripple effect to the background when pressed.

• 何时使用:在 Android 上用于几乎所有可触摸元素.

• When to use it: On Android for almost all touchable elements.

这篇关于何时使用 TouchableNativeFeedback、TouchableHighlight 或 TouchableOpacity?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！