关注我们

React Native - Touchables

可触摸的组件提供了捕获敲击功能的功能。如果可触摸组件不适合您的应用，则可以将其实现为基本按钮的替代方案。使用这些组件，您可以构建自己的按钮。轻触这些组件，即可显示反馈。

touchables组件不提供任何默认样式，因此您需要做一些样式才能在应用程序中很好地呈现。

Touchable组件类型

React Native提供了四个可触摸的组件。

TouchableHighlight
TouchableNativeFeedback
TouchableOpacity
TouchableWithoutFeedback.

TouchableHighlight

TouchableHighlight可以在您要在网络上使用按钮或链接的地方使用。按下该组件的背景将使其变暗。

Props	Type	Required	Description
activeOpacity	number	no	透明度。
onHideUnderlay	function	no	是否隐藏底图。
onShowUnderlay	function	no	是否显示底图。
style	View.style	no
underlayColor	color	no	底图颜色。

TouchableNativeFeedback

TouchableNativeFeedback使视图可以在触摸时正确响应。该组件仅适用于Android操作系统。它使用可绘制的本机状态来显示触摸反馈。

它仅支持一个View实例作为子节点。它是通过用另一个RCTView节点实例替换View来实现的。

无涯教程网

Props	Type	Required	Description
background	backgroundPropType	no	触摸操作反馈的背景。
useForeground	bool	no	将波纹效果添加到前景。

TouchableOpacity

TouchableOpacity包装器用于减少按钮的不透明度。它允许用户按下时看到背景。通过将子级包装在动画中，可以控制按钮的不透明度。

Props	Type	Required	Platform	Description
activeOpacity	number	no		透明度。
tvParallaxProperties	object	no	iOS	控制Apple TV视差效果。
hasTVPreferredFocus	bool	no	iOS	只能在Apple TV上使用。

方法

方法	描述
setOpacityTo()	设置透明度。

TouchableWithoutFeedback

当用户想要处理点击但不想显示任何反馈时，将使用TouchableWithoutFeedback。

Props	Type	Required	Description
hitSlop	object	no	定义了触摸可以从按钮开始的距离。
onAccessibilityTap	function	no	如果将accessibility设置为true，则系统在用户执行辅助功能轻击手势时调用此功能。
accessibilityHint	string	no	它有助于用户了解在对可访问性元素执行操作时将发生的情况。
accessibilityLabel	node	no	当用户与元素进行交互时，文本将由屏幕阅读器读取。
delayLongPress	number	no	它以毫秒为单位延迟onLongPress调用onPressIn。

用户有时会按下视图并保持一段时间。该长按由使用上述任何“可触摸”组件的onLongPress道具的函数处理。

Touchables示例

复制代码

import React, { Component } from 'react';
import { Alert,Platform,StyleSheet,Text,TouchableHighlight,TouchableOpacity,
    TouchableNativeFeedback,TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {
    _onPressButton() {
        Alert.alert('You tapped the button!')
    }

    _onLongPressButton() {
        Alert.alert('You long-pressed the button!')
    }


    render() {
        return (
            <View style={styles.container}>
                <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableHighlight</Text>
                    </View>
                </TouchableHighlight>
                <TouchableOpacity onPress={this._onPressButton}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableOpacity</Text>
                    </View>
                </TouchableOpacity>
                <TouchableNativeFeedback
                    onPress={this._onPressButton}
                    background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
                    </View>
                </TouchableNativeFeedback>
                <TouchableWithoutFeedback
                    onPress={this._onPressButton}
                >
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
                    </View>
                </TouchableWithoutFeedback>
                <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
                    <View style={styles.button}>
                        <Text style={styles.buttonText}>Touchable with Long Press</Text>
                    </View>
                </TouchableHighlight>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        paddingTop: 60,
        alignItems: 'center'
    },
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#5ead97'
    },
    buttonText: {
        padding: 20,
        color: 'white',
        fontSize: 18
    }
});