React Native组件篇（四） — Touchable系列组件
Touchable组件是什么
从字面上的意思我们就可以理解，Touchable是可触摸的控件，相当于我们iOS的简单手势。复杂的RN处理手势还有专门的API如果你想实现视图的拖拽，或是实现自定义的手势，那么请参阅PanResponder API或是手势识别系统的文档。
Touchable现在主要有四种组件，TouchableHighlight 、TouchableOpacity 、 TouchableNativeFeedback 、 ouchableWithoutFeedback 。
- 一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
- 在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
- TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
- 如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。
Touchable组件代码演示
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
Text,
TouchableHighlight,
TouchableOpacity,
} from 'react-native';
class RNHybrid extends Component {
constructor(props) {
super(props);
this.state = {event:'TouchableOpacity',
hightState:'TouchableHighlight'};
}
render() {
return(
<View style={styles.container}>
<TouchableHighlight
activeOpacity = {0.5}
underlayColor = 'yellow'
onHideUnderlay={()=>this.hightStateSet('隐藏')}
onShowUnderlay={()=>this.hightStateSet('显示')}
onPress={()=>this.hightStateSet('点击')}
>
<Text>
{this.state.hightState}
</Text>
</TouchableHighlight>
<TouchableOpacity
underlayColor='blue'
onPress={()=>this.touchEvent('点击')}
onPressIn={()=>this.touchEvent('按下')}
onPressOut={()=>this.touchEvent('抬起')}
onLongPress={()=>this.touchEvent('长按')}
>
<Text>
{this.state.event}
</Text>
</TouchableOpacity>
</View>
);
}
hightStateSet(highSateStr){
this.setState({hightState:highSateStr});
}
touchEvent(eventStr){
this.setState({event:eventStr});
}
}
const styles = StyleSheet.create({
container:{
marginTop:100,
flexDirection:'row',
flexWrap:'wrap',
justifyContent:'space-around',
},
});
AppRegistry.registerComponent('RNHybrid', () => RNHybrid);效果：
举报
腾讯云开发者
