你的位置:首页 > 操作系统

[操作系统]React Native知识5


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  }