Touch* 表示几种按钮,React Native提供以下几种按钮:
Button :
一个简单的跨平台的按钮组件。可以进行一些简单的定制。
属性
color color
文本的颜色(iOS),或是按钮的背景色(Android)
disabled bool
设置为true时此按钮将不可点击
onPress function
用户点击此按钮时所调用的处理函数
title string
按钮内显示的文本
TouchableHighlight:
本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。
Tips.:
TouchableHighlight只支持一个子节点。如果你希望包含多个子组件,用一个View来包装它们。
TouchableNativeFeedback:
本组件用于封装视图,使其可以正确响应触摸操作(仅限Android平台)。在Android设备上,这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。在底层实现上,实际会创建一个新的RCTView节点替换当前的子View,并附带一些额外的属性。
原生触摸操作反馈的背景可以使用background属性来自定义。
TouchableOpacity:
本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级,大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。(
译注
:此组件与TouchableHighlight的区别在于并没有额外的颜色变化,更适于一般场景)
TouchableWithoutFeedback
除非你有一个很好的理由,否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈(然而本组件没有任何视觉反馈)。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。
注意:TouchableWithoutFeedback只支持一个子节点
如果你希望包含多个子组件,用一个View来包装它们。