ReactNativeで画像をボタンにする(TouchableOpacity)

React Native

2018年8月19日

ReactNativeで画像などのViewをボタンにするTouchableOpacityの実装サンプルです。
カビゴンの画像をタップするとアラートが表示します。

react-native: 0.56.0

alt

index.js

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import {
    StyleSheet,
    Button,
    TouchableOpacity,
    View,
    Alert,
    Image
} from 'react-native';
import {name as appName} from './app.json';

export class App extends Component {

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    onPress={() => Alert.alert('Hello')}>
                    <Image
                        style={styles.image}
                        source={require('./image/kabigon.png')}
                    />
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    image: {
        width: 250,
        height: 250,
    }
});

AppRegistry.registerComponent(appName, () => App);