React Native实战系列第九篇 — Touchable系

前言

• 在前面的登录界面中，我们发现所有的组件不会对用户的点击、触摸、拖拽做出合适的响应，这是十分不友好的。那么，在React Native中如何让视图对触发做出合适的响应呢？

一、高亮触摸 TouchableHighlight

• 当手指点击按下的时候，该视图的不透明度会进行降低同时会看到相应的颜色，其实现原理则是在底层新添加了一个View。此外，TouchableHighlight只能进行一层嵌套，不能多层嵌套。

• 常用属性：
  activeOpacity number
  设置组件在进行触摸的时候，显示的不透明度(取值在0-1之间)

onHideUnderlay function 方法
当底层被隐藏的时候调用

onShowUnderlay function 方法
当底层显示的时候调用

style
可以设置控件的风格演示，该风格演示可以参考View组件的style

underlayColor
当触摸或者点击控件的时候显示出的颜色

• 代码演示：

高亮触摸

<p></p>
<p></p>
<p></p>

二、不透明触摸 TouchableOpacity

该组件封装了响应触摸事件；当点击按下的时候，该组件的透明度会降低。
常用属性：

activeOpacity number
设置当用户触摸的时候，组件的透明度

<p></p>
<p></p>
<p></p>

三、常见的触摸事件

• 在开发中会经常的用到点击、按下、抬起、长按等触发事件，那么在TouchableOpacity中又是改如何展示呢？ 在下面代码中分别演示了如何添加各种触摸事件：

  
  不透明触摸的常见触摸事件

<p></p>
<p></p>
<p></p>

四、简单的自定义组件 —— XZHButton

• 提供了简单的定义模型，同学们可以基于此框架进行相应扩展，具体组件代码如下：

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


export default class XZHButton extends Component {
    // 对外开放属性
    static propTypes = {
        // 常用的属性
        title: PropTypes.string,
        bgImage:PropTypes.func,
        btnStyle: View.propTypes.style,
        btnInnerTextStyle:Text.propTypes.style,

        // 响应事件
        clickBtn: PropTypes.func
    };
    
    static defaultProps = {
        clickBtn(){},
        bgImage(){}
    };


    constructor(props){
        super(props);

        this.state = {
            selected:this.props.selected
        }
    }
    
    
    render() {
        return (
           <TouchableOpacity
               style={[styles.btnViewStyle, this.props.btnStyle]}
               onPress={()=>this.props.clickBtn()}
           >
               {this.props.bgImage()}
               <Text style={[styles.btnTextStyle, this.props.btnInnerTextStyle]}>{this.props.title}</Text>
           </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    btnViewStyle:{
        backgroundColor:'blue',
        width:120,
        height:40,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:5
    },

    btnTextStyle:{
        color:'#fff',
        fontSize:16,
        backgroundColor:'transparent'
    }
});

module.exports = XZHButton;

• 外部调用：

 <XZHButton
      clickBtn={()=>this._replaceToMainPage()}
      btnStyle={styles.btnStyle}
      btnInnerTextStyle={styles.btnInnerTextStyle}
       title="立即体验"
       />

<p></p>
<p></p>
<p></p>
<p></p>

长按图片-->识别图中二维码

近期正在把公众账号的文章转移到简书，如果要了解第一动态，请关注我的微信公众账号，带你从零到一的进行React Native开发实战，在其他文章中会有对应的code和资料发放！