React Native学习之组件Touchable系列

Demo展示

Touchable.gif

今天学的组件有点于类似于原生Android当中的button，点击它时它的背景会发生变化，给用户一种视觉交互。在Android中叫selector，而在RN中叫Touchable系列。之前在学Text组件时，我们通过onPress事件可以给Text组件绑定触摸点击事件。为了像Text组件那样使得其他组件也可以被点击，RN提供了三个Touchable类组件：

• TouchableHightlight：高亮触摸。用户点击时，会产生高亮效果
• TouchableOpacity：透明触摸。用户点击时，被点击的组件会出现透明效果
• TouchableWithoutFeedback：无反馈性触摸。用户点击时，被点击的组件不会出现任何视觉变化。（没有UI交互，一般很少用）

实现上图效果

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

class RNStudyFour extends Component {

    show(text) {
        alert(text);
    }

    render() {
        return (
            <View >
                <TouchableHighlight
                    style={styles.container}
                    onPress={this.show.bind(this, 'TouchableHighlight activeOpacity')}
                    activeOpacity={0}
                    underlayColor="#00FF00">
                    <View >
                        <Text style={styles.font}>TouchableHighlight</Text>
                        <Text style={styles.font}>activeOpacity</Text>
                    </View>
                </TouchableHighlight>

                <TouchableHighlight
                    style={styles.container}
                    onPress={this.show.bind(this, 'TouchableHighlight underlayColor')}
                    underlayColor="#00FF00">
                    <View >
                        <Text style={styles.font}>TouchableHighlight</Text>
                        <Text style={styles.font}>underlayColor</Text>
                    </View>
                </TouchableHighlight>

                <TouchableOpacity
                    style={styles.container}
                    onPress={this.show.bind(this, 'TouchableOpacity')}>
                    <Text style={styles.font}>TouchableOpacity</Text>
                </TouchableOpacity>
            </View>
        );
    }
    }

const styles = StyleSheet.create({

    container: {
        height: 100,
        backgroundColor: '#FF0000',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 30,
        marginRight: 30,
        marginTop: 30

    },
    font: {
        fontSize: 25,
        color: '#fff'
    },
});

AppRegistry.registerComponent('RNStudyFour', () => RNStudyFour);

实现起来还是比较简单的。有两个地方需要注意一下：

• TouchableHighlight的activeOpacity和underlayColor

  • activeOpacity：触摸时透明度的设置
  • underlayColor：点击时背景阴影效果的背景颜色

TouchableHighlight还有两个属性，我们大部是用这两个，其它的就不介绍了。它们之间的区别根据图中可以明显的看出来。因为第一个按钮设置的activeOpacity为0,所以点击第一个按钮后完全不透明。

• TouchableOpacity也有activeOpacity属性，但我们经常不用它，因为默认就设置背景颜色的变化了。

好了。今天的Touchable系列组件就学完了。若有不对之处，还请告知。谢谢！