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  }

 

React Native知識5-Touchable類組件