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

效果圖：

二：不透明觸摸 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 會有我的微信號，如果有問題你也可以在那找到我；當然不感興趣無視此信息；