React Native知识5-Touchable类组件

Posted 2020-08-07 TabWu

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 
 }

 

 

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