Help us understand the problem. What is going on with this article?

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

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

やること

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

スクリーンショット 2019-09-07 17.37.30.png

実装

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

  • 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設定すると良いようだ。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away