返回 导航

React / React Native

hangge.com

React Native - Touchable类组件的使用详解(实现Button按钮)

作者:hangge | 2017-02-16 08:10
React Native 没有专门的 Button 组件,也不像 Web 开发那样可以给元素(组件)绑定 click 事件。我们知道 Text 组件有 onPress 事件,可以给 Text 组件绑定触摸点击事件。为了让其他组件可以被点击,同时点击时有视觉变化的效果,React Native 提供了4个“Touchable类组件”供我们使用(其中最后一个是 Android 专有的),具体如下:
  • TouchableHighlight:高亮触摸。用户点击时,会产生高亮效果。
  • TouchableOpacity:透明触摸。用户点击时,点击的组件会出现透明过渡效果。
  • TouchableWithoutFeedback:无反馈性触摸。用户点击时,点击的组件不会出现任何视觉变化。
  • TouchableNativeFeedbackAndroid 系统专用组件。用户点击时会有一种名为涟漪(ripple)的触摸效果。
通过 Touchable 类组件与 TextView Image 组件的结合使用,我们可以很方便地实现各种不同样式的按钮。下面分别对这 Touchable 类组件进行介绍。

一、TouchableHighlight组件

TouchableHighlight 组件在点击的时候会有一些视觉上的变化。这样。通过视觉的变化告诉我们按钮已经点击过了,从而避免重复点击。

1,组件属性

  • activeOpacity:触摸时透明度(默认为 0.8。如果希望做到与 iOS 原生按钮相同的效果,需要将其设为 0.85
  • onHideUnderlay:隐藏背景阴影时触发该事件。
  • onShowUnderlay:出现背景阴影时触发该事件。
  • underlayColor:点击时背景阴影效果的背景颜色。

2,效果图

(1)Text 默认颜色为深灰色,并在 Text 上添加一个 TouchableHighlight 组件。
(2)按下 Text 时出现淡蓝色背景,同时文字颜色变淡。
(3)松开后背景和文字恢复原样,同时弹出消息框。
         

3,样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   show(text) {
     alert(text);
   }
   render() {
      return (
        <View style={styles.flex}>
          <TouchableHighlight onPress={this.show.bind(this,'做最好的开发者知识平台')}
            underlayColor="#E1F6FF">
                <Text style={styles.item}>欢迎访问hangge.com</Text>
          </TouchableHighlight>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex:1,
    marginTop:30
  },
  item:{
    fontSize:18,
    marginLeft:10,
    color:'#434343'
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

二、TouchableOpacity组件

TouchableOpacity 组件只有一个 activeOpacity 属性,不用设置背景颜色,所以使用起来更加方便。

1,效果图

(1)通过 TouchableOpacity 组件结合 View Text 实现一个蓝色的圆形按钮。
(2)按下按钮后,按钮变半透明。
(3)松开后按钮恢复原样,同时弹出消息框。
         

2,样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   show(text) {
     alert(text);
   }
   render() {
      return (
        <View style={styles.flex}>
          <TouchableOpacity onPress={this.show.bind(this,'做最好的开发者知识平台')}>
            <View style={styles.btn}>
              <Text style={{fontSize:16, color:'#fff'}}>hangge.com</Text>
            </View>
          </TouchableOpacity>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex:1,
    marginTop:30
  },
  btn:{
    marginLeft:30,
    marginTop:30,
    width:100,
    height:100,
    backgroundColor:'#18B4FF',
    justifyContent:'center',
    alignItems:'center',
    borderRadius:50,
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);

三、TouchableWithoutFeedback组件

看名字就知道,TouchableWithoutFeedback 组件是没有任何触摸反馈的。所以像官网上说的那样,除非有很充足的理由,否则不要使用这个组件。

1,组件普通属性

这些属性,不仅 TouchableWithoutFeedback 组件有,TouchableHighlightTouchableOpacityTouchableWithoutFeedback 组件上也是可用的。
  • delayLongPress:用来设置按了多少毫秒后,onLongPress 事件会被激活。(默认值:500ms
  • delayPressIn:用来设置手指接触屏幕多少毫秒后,onPressIn 事件会被激活。(默认值:0
  • delayPressOut:用来设置手指离开屏幕多少毫秒后,onPressOut 事件会被激活。(默认值:0

2,组件事件属性

这些属性,不仅 TouchableWithoutFeedback 组件有,TouchableHighlightTouchableOpacityTouchableWithoutFeedback 组件上也是可用的。
  • onLongPress:长按事件
  • onPressIn:触摸进入事件
  • onPressOut:触摸释放事件
  • onPress:触摸点击事件


3,效果图

(1)按钮按下、松开、长按时上面的文字会发生变化,同时点击结束后会弹出提示框。
(2)由于使用的是 TouchableWithoutFeedback,所以在交互时按钮是没有动态效果的。
         

4,样例代码

import React, {Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableWithoutFeedback
} from 'react-native';

//默认应用的容器组件
class App extends Component {
    //构造函数
    constructor(props) {
        super(props);
        this.state = {
            text: 'hangge.com'
        };
    }
    show(text) {
        alert(text);
    }
    render() {
        return (
            <View style={styles.flex}>
                <TouchableWithoutFeedback
                  onLongPress={() => this.setState({text: "长按"})}
                  onPressIn={() => this.setState({text: "按下"})}
                  onPressOut={() => this.setState({text: "松开"})}
                  onPress={this.show.bind(this, '做最好的开发者知识平台')}>
                    <View style={styles.btn}>
                        <Text style={{fontSize: 16,color: '#fff'}}>
                          {this.state.text}
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

//样式定义
const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 30
    },
    btn: {
        marginLeft: 30,
        marginTop: 30,
        width: 100,
        height: 100,
        backgroundColor: '#18B4FF',
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 50
    }
});

AppRegistry.registerComponent('HelloWorld', () => App);

四、TouchableNativeFeedback 组件

TouchableNativeFeedbackAndroid 操作系统专用组件。它使用原生视图的响应状态来展示触摸事件的视觉效果。主要用来做出 Android 特有的一种名为涟漪(ripple)的触摸效果。

1,组件属性

主要设置的是 background 属性,TouchableNativeFeedback.Ripple 函数接收两个参数:
  • 1 个参数:按下时按钮改变的颜色。
  • 2 个参数:涟漪效果是否被限制在 TouchableNativeFeedback 的显示区域。

2,效果图

下面是按钮为按下前的效果。而按下后的涟漪效果是一种动画效果,不方便截图,建议运行查看。

3,样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableNativeFeedback
} from 'react-native';

//默认应用的容器组件
class App extends Component {
   show(text) {
     //alert(text);
   }
   render() {
      return (
        <View style={styles.flex}>
          <TouchableNativeFeedback onPress={this.show.bind(this,'做最好的开发者知识平台')}
            background={TouchableNativeFeedback.Ripple('blue',false)}>
            <View style={styles.btn}>
              <Text style={{fontSize:16, color:'#fff'}}>hangge.com</Text>
            </View>
          </TouchableNativeFeedback>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex:1,
    marginTop:30
  },
  btn:{
    marginLeft:30,
    marginTop:30,
    width:100,
    height:60,
    backgroundColor:'#18B4FF',
    justifyContent:'center',
    alignItems:'center',

  }
});

AppRegistry.registerComponent('HelloWorld', () => App);
评论

全部评论(0)

回到顶部