React Native学习之 Touchables类组件

TouchableHighlight组件

用户点击时，组件的透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得组件视图变暗或变亮。

TouchableHighlight只支持一个子节点（不能没有子节点也不能多于一个），包含多个子组件时，可以用一个View来包裹

TouchableHighlight组件的属性如下：

activeOpacity:触摸时透明度的设置（0-1之间，默认0.85），需要设置underlayColor

onHideUnderlay:底层颜色被隐藏时调用

onShowUnderlay:底层颜色被显示时调用

underlayColor:触摸操作时显示出来的底层的颜色

style:设置样式

效果图如下：

示例代码如下：

export default class TouchableHighlightDemo extends Component {
    show(text) {
        Alert.alert(text);
    }

    render() {
        return (
            <View style={styles.flex}>
                <TouchableHighlight style={styles.button}
                                    onPress={this.show.bind(this, 'React Native')} underlayColor='#e1f6ff'>
                    <Text style={styles.text}>React Native</Text>
                </TouchableHighlight>
                <TouchableHighlight style={styles.button}
                                    onPress={this.show.bind(this, 'Hello World')} underlayColor='#e1f6ff'>
                    <Text style={styles.text}>Hello World</Text>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 25,
        alignItems: 'center'
    },
    text: {
        padding: 5,
        fontSize: 18,
        marginLeft: 5,
        color: '#434343'
    },
    button: {
        alignItems: 'center',
        margin: 5,
    }
});

TouchableOpacity

用户点击时，组件会降低按钮的透明度，其属性如下：

style:设置样式

activeOpacity:组件被触摸时以多少透明度显示（0-1之间，默认0.2）

效果图如下：

示例代码如下：

export default class TouchableOpacityDemo extends Component {
    show(text) {
        Alert.alert(text);
    }

    render() {
        return (
            <View style={styles.flex}>
                <TouchableOpacity style={styles.button} activeOpacity={0.3}
                                  onPress={this.show.bind(this, 'React Native')}>
                    <Text style={styles.text}>React Native</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 25,
        alignItems: 'center'
    },
    text: {
        padding: 5,
        fontSize: 18,
        marginLeft: 5,
        color: '#434343'
    },
    button: {
        alignItems: 'center',
        margin: 5,
        backgroundColor: '#18B4FF'
    }
});

TouchableWithoutFeedback

用户点击时，组件不会出现任何视觉变化，仅绑定press、longPress等事件。所以像官网上说的那样，除非有很充足的理由，否则不要使用这个组件。

该组件仅支持一个子节点（不能没有子节点也不能多于一个），包含多个子组件时，可以用一个View来包裹

 

TouchableNativeFeedback

这个组件是Android操作系统专用组件。在Android设备上，组件会利用原生状态来渲染触摸的反馈。主要用来做出Android特有的一种名为涟漪（ripple）的触摸效果

目前它只支持一个单独的View实例作为子节点

TouchableNativeFeedback的属性和静态方法如下：

# 主要属性
background：触摸反馈的时候显示什么类型的背景，推荐选用本组件的几个静态方法来创建这个对象

# 静态方法
SelectableBackground()：会创建使用android默认主题背景(?android:attr/selectableItemBackground)

SelectableBackgroundBorderless():会创建使用android默认的无框的主题背景(?android:attr/selectableItemBackgroundBorderless)。只适用于Android API level 21+

Ripple(color,borderless):会创建当组件被按下的时候有一个涟漪的效果，通过color参数指定颜色，如果borderless为true的时候，那么涟漪效果会渲染到该组件视图的外边。这个背景类型只在Android API level 21+适用。

效果图如下：

示例代码如下：

export default class TouchableNativeFeedbackDemo extends Component {

    _onPressButton(text) {
        Alert.alert(text)
    }

    render() {
        return (
            <View style={styles.flex}>
                <TouchableNativeFeedback
                    onPress={this._onPressButton.bind(this, 'Button 1')}
                    background={TouchableNativeFeedback.SelectableBackground()}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Button 1</Text>
                    </View>
                </TouchableNativeFeedback>

                <TouchableNativeFeedback
                    background={TouchableNativeFeedback.Ripple('red', false)}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Ripple</Text>
                    </View>
                </TouchableNativeFeedback>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex: {
        flex: 1,
        marginTop: 25,
        alignItems: 'center'
    },
    button: {
        margin: 10,
        alignItems: 'center',
        backgroundColor: '#18B4FF'
    },
    buttonText: {
        padding: 20,
        color: 'white'
    }
});