版本:0.81
TouchableHighlight
如果你在寻找一种更全面、面向未来的方式来处理基于触摸的输入,请查看 Pressable API。
用于使视图能够正确响应触摸的包装器。按下时,被包装视图的不透明度会降低,从而让底层颜色透出,使视图变暗或产生色调变化。
底层颜色来自于将子元素包装在一个新的 View 中,这可能会影响布局;如果使用不当,有时还会导致不希望出现的视觉瑕疵,例如被包装视图的 backgroundColor 没有显式设置为不透明颜色时。
TouchableHighlight 必须只有一个子元素(不能是零个,也不能多于一个)。如果你希望有多个子组件,请将它们包装在一个 View 中。
React TSX
function MyComponent(props: MyComponentProps) {
return (
<View {...props} style={{flex: 1, backgroundColor: '#fff'}}>
<Text>我的组件</Text>
</View>
);
}
<TouchableHighlight
activeOpacity={0.6}
underlayColor="#DDDDDD"
onPress={() => alert('已按下!')}>
<MyComponent />
</TouchableHighlight>;
示例
参考
属性
TouchableWithoutFeedback Props
继承自 TouchableWithoutFeedback Props。
activeOpacity
决定在触摸激活时,被包装视图应具有的不透明度。该值应介于 0 和 1 之间。默认值为 0.85。需要设置 underlayColor。
| 类型 |
|---|
| number |
onHideUnderlay
在底层颜色隐藏后立即调用。
| 类型 |
|---|
| function |
onShowUnderlay
在底层颜色显示后立即调用。
| 类型 |
|---|
| function |
style
| 类型 |
|---|
| View.style |
underlayColor
在触摸激活时会透出的底层颜色。
| 类型 |
|---|
| color |
hasTVPreferredFocus iOS
(仅限 Apple TV) TV 首选焦点(参见 View 组件文档)。
| 类型 |
|---|
| bool |
nextFocusDown Android
TV 下一个焦点向下(参见 View 组件文档)。
| 类型 |
|---|
| number |
nextFocusForward Android
TV 下一个焦点向前(参见 View 组件文档)。
| 类型 |
|---|
| number |
nextFocusLeft Android
TV 下一个焦点向左(参见 View 组件文档)。
| 类型 |
|---|
| number |
nextFocusRight Android
TV 下一个焦点向右(参见 View 组件文档)。
| 类型 |
|---|
| number |
nextFocusUp Android
TV 下一个焦点向上(参见 View 组件文档)。
| 类型 |
|---|
| number |
testOnly_pressed
用于快照测试的便捷属性。
| 类型 |
|---|
| bool |