React Native知识5-Touchable类组件

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);

效果图:

React Native知识5-Touchable类组件

二:不透明触摸 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);

效果图:

React Native知识5-Touchable类组件

三: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
}

最近有个妹子弄的一个关于扩大眼界跟内含的订阅号,每天都会更新一些深度内容,在这里如果你感兴趣也可以关注一下(嘿对美女跟知识感兴趣),当然可以关注后输入:github 会有我的微信号,如果有问题你也可以在那找到我;当然不感兴趣无视此信息;

React Native知识5-Touchable类组件

上一篇:sublime text 安装nodejs开发插件


下一篇:Less32-Less-33