【React Native】タッチイベントの処理方法を解説！ButtonとTouchableコンポーネントの使い分け

モバイルデバイスでは、UIとのやり取りは主にタッチやタップを通じて行われます。アプリを使う際には、ボタンをタップしてアクションを実行したり、画面に触れてスクロールしたり、ピンチ操作でズームしたりするのが一般的です。こうしたタップやタッチといったジェスチャーを処理するために、React Nativeには専用のイベントハンドラーと、タッチ操作を扱えるTouchableコンポーネントが用意されています。

ここでは、ボタンがクリックされたときに何が起こるのか、具体的な例を見ていきましょう。

例1：ボタンのタップを処理する

まずは、もっとも基本的なButtonコンポーネントの例です。

<Button
    onPress={() => {
      alert('You Tapped on Me!');
    }}
    title="Tap Me"
/>

ユーザーがボタンをタップすると、onPressイベントが呼び出されます。実際に動作するサンプルコードは以下の通りです。

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
    return (
        <View style={{flex :1, justifyContent: 'center', margin: 15 }}>
            <Button
                onPress={() => {
                    alert('You Tapped on Me!');
                }}
                title="Tap Me"
            />
        </View>
    );
}
export default App;

実行結果

Touchableコンポーネントとは？

React NativeのTouchableコンポーネントは、Buttonなどで利用されるonPress()イベントに問題がある場合でも、タップジェスチャーを確実にキャプチャできるようにするための仕組みです。

Touchableコンポーネントには、任意のReact Nativeコンポーネント上でタップジェスチャーを扱うための以下の種類があります。

• TouchableOpacity
• TouchableHighlight
• TouchableWithoutFeedback

TouchableOpacity

この要素は、タッチされたときに要素の透明度（opacity）を変化させます。押したことが視覚的に伝わりやすいのが特徴です。

TouchableOpacityは次のように使用します。

<TouchableOpacity onPress={() => alert('You Tapped Me')}>
    <Text style = {styles.text}>
       Button
    </Text>
</TouchableOpacity>

実際に動作するサンプルはこちらです。

import React from 'react'
import { TouchableOpacity, StyleSheet, View, Text } from 'react-native'
const App = () => {
    return (
        <View style = {styles.container}>
            <TouchableOpacity onPress={() => alert('You Tapped Me')}>
                <Text style = {styles.text}>
                    Button
                </Text>
            </TouchableOpacity>
        </View>
    )
}
export default App
const styles = StyleSheet.create ({
    container: {
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'red'
    }
});

ユーザーがボタンに触れると、透明度が変化し、押下したことが視覚的にフィードバックされます。

TouchableHighlight

ユーザーが要素を押すと、その要素が暗くなり、背後の色が透けて表示されます。

使用前に、以下のようにTouchableHighlightをインポートしておく必要があります。

import { TouchableHighlight } from 'react-native'

この例では、テキストラベルを含むTextコンポーネントを、さらにTouchableHighlightコンポーネントでラップしています。スタイルは要件に応じて自由に追加できます。onPress関数はTouchableHighlight側に設定し、タップするとアラートメッセージが表示されます。

<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
    <Text style = {styles.text}>
       Button
    </Text>
</TouchableHighlight>

完全な動作サンプルは以下の通りです。

import React from 'react'
import { View, TouchableHighlight, Text, StyleSheet } from 'react-native'
const App = (props) => {
    return (
        <View style = {styles.container}>
            <TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}>
                <Text style = {styles.text}>
                    Button
                </Text>
            </TouchableHighlight>
        </View>
    )
}
export default App
const styles = StyleSheet.create ({
    container: {
        padding:100,
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'gray'
    }
})

実行結果

TouchableWithoutFeedback

タッチイベントを処理したいものの、視覚的なフィードバックが不要な場合に使用します。

以下のように、対象となる要素をTouchableWithoutFeedbackコンポーネントでラップします。

<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
    <Text style = {styles.text}>
       Button
    </Text>
</TouchableWithoutFeedback>

例：TouchableWithoutFeedbackコンポーネントの使い方

import React from 'react'
import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native'
const Home = (props) => {
    return (
        <View style = {styles.container}>
            <TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}>
                <Text style = {styles.text}>
                    Button
                </Text>
            </TouchableWithoutFeedback>
        </View>
    )
}
export default Home
const styles = StyleSheet.create ({
    container: {
        padding:100,
        alignItems: 'center',
    },
    text: {
        borderWidth: 1,
        padding: 25,
        borderColor: 'black',
        backgroundColor: 'gray'
    }
})

実行結果

まとめ

React Nativeでタッチ操作を扱う際は、標準のButtonコンポーネントのonPressイベントに加えて、用途に応じて3種類のTouchableコンポーネントを使い分けると効果的です。押下時に透明度を変えてフィードバックを与えたい場合はTouchableOpacity、背景色が透けるハイライト表現が必要な場合はTouchableHighlight、見た目の変化が不要な場合はTouchableWithoutFeedbackを選択しましょう。なお、最近のReact Nativeでは、より柔軟にタッチ状態を制御できるPressableコンポーネントも推奨されているので、新しいプロジェクトでは併せて検討するとよいでしょう。