React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件
也绑定点击事件,React Native提供了3个组件来做这件事。
1.TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果。
2.TouchableOpacity:透明触摸。用户点击时,点击的组件会出现透明效果。
3.TouchableWithoutFeedback:无反馈性触摸。用户点击时无任何视觉效果。
注意:只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们。
一:TouchableHighlight
1:当手指点击按下的时候,该视图的不透明度会进行降低同时会看到相应的颜色,其实现原理则是在底层新添加了一个View。此外,TouchableHighlight只能进行一层嵌套,不能多层嵌套。
常用属性:
1.1:activeOpacity number
设置组件在进行触摸的时候,显示的不透明度(取值在0-1之间)
1.2:onHideUnderlay function 方法
当底层被隐藏的时候调用
1.3:onShowUnderlay function 方法
当底层显示的时候调用
1.4:style
可以设置控件的风格演示,该风格演示可以参考View组件的style
1.5:underlayColor
当触摸或者点击控件的时候显示出的颜色
2:实例代码
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, Alert, Image, TouchableHighlight } from 'react-native'; class ReactNativeProject extends Component { _show(text) { alert(text); } render() { return ( <View style={styles.container}> <TouchableHighlight onPress={this._show.bind(this,'React Native')} underlayColor='#E1F6FF'> <Text style={styles.item}>React Native</Text> </TouchableHighlight> <TouchableHighlight onPress={this._show.bind(this,'点击效果')} underlayColor='#E1F6FF'> <Text style={styles.item}>点击效果</Text> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop:64 }, item: { fontSize:18, marginLeft:5, color:'#434343' } }); AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
效果图:
二:不透明触摸 TouchableOpacity
1:该组件封装了响应触摸事件;当点击按下的时候,该组件的透明度会降低。该组件不用设置背景色,这样使用起来更方便;
常用属性:
activeOpacity number
设置当用户触摸的时候,组件的透明度
2:实例代码
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TextInput, Alert, Image, TouchableHighlight, TouchableOpacity } from 'react-native'; class ReactNativeProject extends Component { _show(text) { alert(text); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this._show.bind(this,'React Native')} activeOpacity={0.5}> <Text style={styles.item}>React Native</Text> </TouchableOpacity> <TouchableOpacity onPress={this._show.bind(this,'点击效果')} activeOpacity={0.9}> <Text style={styles.item}>点击效果</Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, marginTop:64 }, item: { fontSize:18, marginLeft:5, color:'#434343' } }); AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);
效果图:
三:TouchableWithoutFeedback
除非你有一个很好的理由,否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈(然而本组件没有任何视觉反馈)。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。TouchableWithoutFeedback只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们。
四:知识点
1:react native 代参bind this 的两种方式(如果不用bind,事件会在加载时马上就执行了)
第一种带参数 bind this的方式(使用箭头方法)
<TouchableOpacity onPress={(e) => this._needHandlderArgument(e,argument)} underlayColor='#00EE76'> </TouchableOpacity >
_needHandlderArgument(e, argument) { // 只处理argument e用于绑定this }
第二种带参数 bind this的方式(直接带参bind)
<TouchableOpacity onPress={this._needHandlderArgument.bind(this,argument)} underlayColor='#00EE76'> </TouchableOpacity >
_needHandlderArgument(argument) { // 只处理argument }