React Native Pressable

概要: このチュートリアルでは、React Native Pressableコンポーネントを使用して、プレス、ホバー、フォーカスなどのさまざまなタッチ操作を検出する方法を学びます。

React Native Pressableコンポーネントの概要

Buttonコンポーネントは、外観と操作感の点でかなり制限されています。ボタンがアプリのデザインに合わない場合は、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イベントに割り当てて、プレスイベントを処理します。

3番目に、handlePressイベントを定義してアラートを表示します。

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

ボタンを押すと、Pressed!というテキストのアラートが表示されます。

出力

概要

• Pressableコンポーネントを使用してカスタムボタンを作成します。