Touchable系列组件使⽤详解
Touchable系列组件使⽤详解
在做App开发过程中离不了的需要⽤户交互，说到交互，我们⾸先会想到的就是按钮了，在React Native中没有专门的按钮组件。
为了能让视图能够响应⽤的的点击事件，我们需要借助Touchablexxx组件，来包裹我们的视图。为什么说是Touchablexxx 呢，因为它不只是⼀个组件，⽽是⼀组组件，⼀下四个组件都可以⽤来包裹视图来响应⽤户的点击事件。
TouchableWithoutFeedback：响应⽤户的点击事件，如果你想在处理点击事件的同时不显⽰任何视觉反馈，使⽤它是个不错的选择。
TouchableHighlight：在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。TouchableOpacity：相⽐TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在⽤户⼿指按下时降低按钮的透明度，⽽不会改变背景的颜⾊。TouchableNativeFeedback：在Android上还可以使⽤TouchableNativeFeedback，它会在⽤户⼿指按下时形成类似⽔波纹的视觉效果。注意，此组件只⽀持Android。
⼼得：以上四个组件，其中TouchableHighlight、TouchableOpacity以及TouchableNativeFeedback都是在TouchableWithoutFeedback的基础上做了⼀些扩展，我们从它们的源码中可以看出：TouchableHighlight：
var TouchableHighlight = ateClass({
propTypes: {
...TouchableWithoutFeedback.propTypes,
TouchableOpacity：
var TouchableOpacity = ateClass({
mixins: [TimerMixin, Touchable.Mixin, NativeMethodsMixin],
propTypes: {
...TouchableWithoutFeedback.propTypes,
TouchableNativeFeedback:
var TouchableNativeFeedback = ateClass({
propTypes: {
...TouchableWithoutFeedback.propTypes,
因为TouchableWithoutFeedback有其它三个组件的共同属性，所以我们先来学习⼀下TouchableWithoutFeedback。
TouchableWithoutFeedback使⽤详解
TouchableWithoutFeedback⼀个Touchable系列组件中最基本的⼀个组价，只响应⽤户的点击事件不会做任何UI上的改变，在使⽤的过程中需要特别留意。
提⽰：⽆论是TouchableWithoutFeedback还是其他三种Touchable组件，都是在根节点都是只⽀持⼀个组件，如果你需要多个组件同时相应单击事件，可以⽤⼀个View将它们包裹着，它的这种根节点只⽀持⼀个组件的特性和ScrollView很类似。
接下来让我们来看⼀下，TouchableWithoutFeedback有哪些常⽤的属性：
TouchableWithoutFeedback常⽤的属性
说到常⽤的属性TouchableWithoutFeedback⾸先要提到的就是onPress了。
onPress function
当触摸操作结束时调⽤，但如果被取消了则不调⽤（譬如响应者被⼀个滚动操作取代）。
⼼得：onPress可谓是Touchable系列组件的最常⽤的属性之⼀了，如果你要让视图响应⽤户的单击事件，那么⽤onPress就
可以了。接下来呢，我们就来使⽤onPress属性来实现⼀个统计按钮单击次数的例⼦。
onPress={()=> {
this.setState({count: unt+1})
}}
>
我是TouchableWithoutFeedback，单击我
您单击了:{unt}次
下载源码
TouchableWithoutFeedback_onPress
onLongPress function
当⽤户长时间按压组件(长按效果)的时候调⽤该⽅法。
⼼得：onLongPress也是Touchable系列组件的最常⽤的属性之⼀，通常⽤于响应长按的事件，如长按列表弹出删除对话框等。
接下来呢，我们就来使⽤onLongPress属性来响应⽤户的长按事件。
onPress={()=> {
this.setState({count: unt + 1})
}}
onLongPress={()=> {
this.setState({countLong: untLong + 1})
Alert.alert(
'提⽰',
'确定要删除吗?',
[
{text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: '确实', onPress: () => console.log('OK Pressed')},
]
)
}}
>
我是TouchableWithoutFeedback，单击我
您单击了:{unt}次
您长按了:{untLong}次
TouchableWithoutFeedback_onLongPress
我们在上⾯例⼦的基础上为Touchable设置了onLongPress属性，当⽤户长时间按压按钮是会弹出⼀个对话框。
⼼得：当我们没有对Touchable组件设置onLongPress属性⽽设置了onPress属性的时候，我们长按按钮之后会回调onPress ⽅法。另外，我们也可以通过delayLongPress⽅法来这设置从onPressIn 被回调开始，到onLongPress被调⽤的延迟。
disabled bool
如果设为true，则禁⽌此组件的⼀切交互。
⼼得：disabled也是Touchable系列组件的最常⽤的属性之⼀，通常⽤于禁⽌按钮相应⽤户的点击事件，⽐如，当⽤户单击按钮进⾏登录时，需要进⾏⽹络请求，在请求操作完成之前如果⽤户多次单击登录按钮我们通常不希望发起多次登录请求，这个时候就可以借助disabled的属性来禁⽤按钮的交互。
接下来呢，我们就来模拟⽤户登录的例⼦来介绍⼀下disabled的使⽤。
disabled={this.state.waiting}
onPress={()=> {
this.setState({text:'正在登录...',waiting:true})
setTimeout(()=>{
this.setState({text:'⽹络不流畅',waiting:false})
},2000);
}}
>
登录
{}
下载源码
TouchableWithoutFeedback_disabled
在上⾯例⼦中我们模拟了⽤户登录的效果，默认状态下按钮是可以响应⽤户点击事件的，在正在登录过程中我们通过disabled 属性来禁⽤了按钮，这时⽆论是单击还是长按按钮都是没有任何响应的，在停隔2s后，我们⼜将按钮解除禁⽤，这时按钮⼜可以重新响应⽤户的点击事件了。
当⽤户长时间按压按钮时会弹出⼀个对话框。
⼼得：有朋友问我，想禁⽤按钮，但是通过设置Touchable的accessible属性为false没有效果，这也是因为即使accessible为false的情况下，Touchable组件还是可以响应交互事件的，要想禁⽤Touchable的交互事件，只能通过disabled属性。onPressIn function与onPressOut function
这两个⽅法分别是当⽤户开始点击按钮时与点击结束后被回调。
通过这两个⽅法我们可以计算出⽤户单击按钮所⽤的时长，另外也可以做⼀些其它个性化的功能。现在我们将通过⼀个例⼦来计算出⽤户点击按钮所⽤的时长。
onPressIn={()=> {
this.setState({text:'触摸开始',startTime:new Date().getTime()})
}}
onPressOut={()=>{
this.setState({text:'触摸结束，持续时间:'+(new Date().getTime()-this.state.startTime)+'毫秒'})
}}
>
点我
{}
下载源码
TouchableWithoutFeedback Pressin_out
在上述例⼦中我们记录下⽤户单击按钮的时间戳，当单击结束后我们获取当前时间减去刚单击时的时间，它们的差值就是⽤户单击按钮所⽤的时间了。
⼼得：另外我们也可以通过delayPressIn与delayPressOut两个⽅法来分别设置，从⽤户点击按钮到onPressIn被回调的延时与从点击结束到onPressOut被回调时的延时。TouchableHighlight使⽤详解
TouchableHighlight是Touchable系列组件中⽐较常⽤的⼀个，它是在TouchableWithoutFeedback的基础上添加了⼀些UI上的扩展，既当⼿指按下的时候，该视图的不透明度会降低，同时会看到相应的颜⾊(视图变暗或者变亮)，从TouchableHighlight的源码中我们可以看出，其实这个颜⾊就是在TouchableHighlight的最外层个添加了⼀个View，通过改变这个View的背景⾊及透明度来达到这⼀效果。
render: function() {
return (
accessible={this.props.accessible !== false}
accessibilityLabel={this.props.accessibilityLabel}
accessibilityComponentType={this.props.accessibilityComponentType}
accessibilityTraits={this.props.accessibilityTraits}
ref={UNDERLAY_REF}
style={this.state.underlayStyle}
onLayout={Layout}
hitSlop={this.props.hitSlop}
onStartShouldSetResponder={uchableHandleStartShouldSetResponder} onResponderTerminationRequest={uchableHandleResponderTerminationRequest}
onResponderGrant={uchableHandleResponderGrant}
onResponderMove={www.doczj/doc/c49929584.html
dleResponderMove}
onResponderRelease={uchableHandleResponderRelease}
onResponderTerminate={uchableHandleResponderTerminate}
testID={stID}>
{React.cloneElement(
ly(this.props.children),
{
ref: CHILD_REF,
}
)}
{derDebugView({color: 'green', hitSlop: this.props.hitSlop})}
);
}
TouchableHighlight所扩展出来的属性
activeOpacity number
我们可以通过activeOpacity来设置TouchableHighlight被按下时的不透明度，从TouchableHighlight的源码中可以看出，它的默认不透明度为0.85，我们可以根据需要进⾏调节。
var DEFAULT_PROPS = {
activeOpacity: 0.85,
underlayColor: 'black',
underlayColor color
我们可以通过underlayColor属性来设置TouchableHighlight被按下去的颜⾊，默认状态下为balck⿊⾊。
onHideUnderlay function
当衬底(也就是上⽂讲到的最外层的View)被隐藏的时候调⽤。
⼼得，通常情况下，当⼿指结束点击时衬底会被隐藏。
onShowUnderlay function
当衬底(也就是上⽂讲到的最外层的View)显⽰的时候调⽤。
⼼得，通常情况下，当⼿指刚开始点击时衬底会显⽰。
style View#style
因为TouchableHighlight的最外层个添加了⼀个View，所以我们可以设置这个View的样式来做出⼀个形形⾊⾊的按钮。
接下来，我们通过⼀个例⼦来看⼀下这些属性的使⽤。
style={{marginTop:20}}
activeOpacity={0.7}
underlayColor='green'
onHideUnderlay={()=>{
this.setState({text:'衬底被隐藏'})原生安卓app开发
}}
onShowUnderlay={()=>{
this.setState({text:'衬底显⽰'})
}}
onPress={()=>{
}}
>
TouchableHighlight
{}
下载源码
TouchableHighlight
TouchableOpacity使⽤详解
TouchableOpacity也是Touchable系列组件中⽐较常⽤的⼀个，它是在TouchableWithoutFeedback的基
础上添加了⼀些UI上的扩展，但这些扩展相⽐TouchableHighlight少了⼀个额外的颜⾊变化。它是通过在按下去改变视图的不透明度来表⽰按钮被点击的。
TouchableOpacity所扩展出来的属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。