TouchableHighlightを利用して何でもボタンにする

ボタン以外にボタン機能をもたせたい場合などにはTouchableHighlightを利用します。

やること

下記のように（例えば）ViewやImageをボタンのようにして、押したとき（Touchしたとき）色が変わり、イベントを発生させる（下記は静止画です。すみません）。

実装

特に難しいことはないが、プロパティとかの特性をしる必要がある。代表的なものは下記の３つ。

• onPress: クリックしたときのイベントを定義するが、設定してないとそもそも色が変わらない。
• underlayColor: クリックしたときに変化する色のベース（背景色）となる。
• activeOpacity: クリックしたときに透過される割合。

App.js

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TouchableHighlight, Image } from 'react-native';

export default class App extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <TouchableHighlight
                    onPress={() => console.log("pushed")}
                    underlayColor={'red'} // #角丸を設定した場合は、背景色を同じ色にしないとおかしく見える
                    activeOpacity={0.7}
                >
                    <View style={{
                        width: 100,
                        height: 100,
                        backgroundColor: 'blue',
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderRadius: 10,
                        shadowColor: '#000',
                        shadowOffset: { width: 2, height: 2 },
                        shadowOpacity: 0.5,
                        shadowRadius: 2
                    }}
                    >
                        <Text style={{ color: "#FFF" }}>Hoge</Text>
                    </View>
                </TouchableHighlight>

                {/* スペーサー */}
                <View style={{ height: 100 }}></View>

                <TouchableHighlight
                    onPress={() => console.log("Image Press.")}
                    underlayColor={'#fff'}
                    activeOpacity={0.5}

                >
                    <Image
                        source={require('./assets/shiro2.jpg')}
                        style={{
                            width: 100,
                            height: 100,
                            borderRadius: 10,
                            shadowColor: '#000',
                            shadowOffset: { width: 2, height: 2 },
                            shadowOpacity: 0.5,
                            shadowRadius: 2,
                        }}
                    />
                </TouchableHighlight>
            </View>
        );
    }
}

同様の機能にTouchableOpacity()というのもある。が、だいたい機能は同じらしい。あと、もっとカスタマイズしたいときはTouchableWithoutFeedbackを利用して、自分でTouch時の動作を定義することもできるらしい。

おまけでDropshadowしてみたが、Imageの方には影が落ちない。どうやら、TouchableHighlight自体にshadow設定すると良いようだ。