【React Native开发】 - Touchable类组件的使用
1.Touchable类组件介绍
ReactNative没有像web开发那样可以给元素(组件)绑定click事件。不过可以通过onPress实现点击事件的处理。
- TouchableHighlight:高亮触摸。用户点击时,会产生高亮效果。
- TouchableOpacity:透明触摸。用户点击时,点击的组件会出现透明过渡效果。
- TouchableWithoutFeedback:无反馈行触摸。用户点击时,点击的组件不会出现任何视觉变化。
- TouchableNativeFeedback:(仅限Android)这个组件利用原生状态渲染触摸组件。由于不跨平台,不建议使用。
2.TouchableHighlight高亮触摸
在ReactNative App中,我们希望点击时会有视觉上的变化。视觉上的变化会告知我们已经点击了,避免重复点击。
TouchableHighlight组件属性有:
- activeOpacity:触摸时透明度(0 - 1);
- onHideUnderlay:隐藏背景阴影时触发该事件;
- onShowUnderlay:显示背景阴影时触发该事件;
- underlayColor:点击时背景阴影效果的背景颜色。
3.TouchableOpacity透明触摸
TouchableOpacity组件不用设置背景颜色,该组件只有一个属性:activeOpacity。
4.TouchableWithoutFeedback无反馈行触摸
就像官网上所说的那样,除非有充足的理由,你才使用TouchableWithoutFeedback组件,一般不建议使用该组件,如果没有
反馈的话,就像web交互,而不是native交互。
TouchableWithoutFeedback组件支持3个事件:
- onLongPress:长按事件;
- onPressIn:触摸进入事件;
- onPressOut:触摸释放事件。
5.注意事项
- TouchableWithoutFeedback组件是触摸点击不带反馈效果的,另外三个有反馈效果。这三个组件都继承TouchableWithoutFeedback的属性。
- TouchableHighlight和TouchableOpacity只有设置onPress后,对应的背景和透明度才有效。
6.实例
import React,{Component} from 'react' import { StyleSheet, View, Text, TouchableHighlight, TouchableOpacity, } from 'react-native' export default class Root extends Component{ constructor(props){ super(props) } render(){ return ( <View style={styles.container}> <TouchableHighlight style={styles.touchableBtn} activeOpacity={0.8} underlayColor='#FF3333' onPress={this.touchable.bind(this,'高亮触摸')}> <Text style={styles.text}>TouchableHighlight触摸</Text> </TouchableHighlight> <TouchableOpacity style={[styles.touchableBtn,{marginTop:15}]} activeOpacity={0.8} onPress={this.touchableOpacity.bind(this,'透明触摸')}> <Text style={styles.text}>TouchableOpacity触摸</Text> </TouchableOpacity> </View> ) } touchable(text){ alert(text) } touchableOpacity(text){ alert(text) } } const styles = StyleSheet.create({ container:{ flex:1, justifyContent:'center', alignItems:'center', }, touchableBtn:{ backgroundColor:'#FD6363', padding:5, borderRadius:8, }, text:{ color:'#fff', fontSize:14, }, })