React Native 可按压组件

摘要: 本教程将教你如何使用 React Native 可按压组件来检测各种触摸交互，例如按下、悬停和聚焦。

React Native 可按压组件介绍

按钮组件在外观和感觉方面非常有限。如果按钮不符合您的应用程序设计，您可以使用 Pressable 组件构建您的按钮。

以下是使用 Pressable 组件的步骤

首先，从 react-native 库导入 Pressable 组件

import { Pressable } from 'react-native';Code language: JavaScript (javascript)

其次，在您的应用程序中使用 Pressable 组件

<Pressable onPress={handlePress}>
  <Text>Button</Text>
</Pressable>Code language: JavaScript (javascript)

Pressable 具有以下事件

• onPressIn 在您开始按下手势时触发。

在 onPressIn 事件之后

• 如果您移开手指，Pressable 组件将触发 onPressOut，然后触发 onPress 事件。
• 如果您在移开手指之前将手指停留超过 500 毫秒，Pressable 将触发 onLongPress 事件，然后触发 onPressOut 事件。

下图

以下示例展示了如何使用 Pressable 组件创建自定义按钮

import { StyleSheet, Text, View, Pressable, Alert } from 'react-native';

const App = () => {

    const handlePress = () => {
        Alert.alert('Pressed!');
    }
    return (
        <View style={styles.container}>
            <Pressable style={styles.button} onPress={handlePress}>
                <Text style={styles.buttonText}>Button</Text>
            </Pressable>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    button: {
        paddingVertical: 8,
        paddingHorizontal: 16,
        borderRadius: 332,
        minWidth: 100,
        alignItems: 'center',
        backgroundColor: '#111',
    },

    buttonText: {
        color: '#fff',
        fontSize: 16
    },

});

export default App;Code language: JavaScript (javascript)

它是如何工作的。

首先，从 react-native 库导入 Pressable 组件和其他组件

import { StyleSheet, Text, View, Pressable, Alert } from 'react-native';Code language: JavaScript (javascript)

其次，使用 Pressable 和 Text 组件创建一个自定义按钮

<View style={styles.container}>
    <Pressable style={styles.button} onPress={handlePress}>
        <Text style={styles.buttonText}>Button</Text>
    </Pressable>
</View>Code language: JavaScript (javascript)

在 Pressable 组件中，将 handlePress 函数分配给 onPress 事件以处理按下事件。

第三，定义 handlePress 事件以显示警报

const handlePress = () => {
   Alert.alert('Pressed!');
}Code language: JavaScript (javascript)

当您按下按钮时，它会显示一个带有文本 Pressed! 的警报。

输出

摘要

• 使用 Pressable 组件创建一个自定义按钮。