【React Native】TouchableOpacityコンポーネントを使って画像をボタン化する

React Nativeでイベントを設定したボタンを表示させる場合は、Buttonコンポーネントを使えば手っ取り早いが、今回はTouchableOpacityコンポーネントを使って、画像をボタン化する方法を紹介する。

コンポーネントのインポート

まずはTouchableOpacityコンポーネントをインポートする。

import React, { Component } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';

実装

TouchableOpacityはButton同様にonPress属性を持ち、要素がタップされた際のイベントを設定することができる。

Buttonは自身に対しイベントを設定するのに対し、TouchableOpacityでは子要素がタップされた時に設定したイベントが発火する。

import React, { Component } from 'react';
import { View, Image, TouchableOpacity } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <TouchableOpacity onPress={() => console.warn('pressed!')}>
          <Image
            style={{
              width: 500,
              height: 500
            }}
            source={require('./assets/sample.jpg')}
          />
        </TouchableOpacity>
      </View>
    );
  }
}

アプリを実行すると、以下のようにImageで指定した画像が表示され、タップするとonPressで設定した処理が実行される。

実際にやってみると分かるが、タップすると画像が半透明になりボタンのような挙動になっていることが分かる。