【react-native】buttonの代用品としてTouchableOpacityを使う

react-nativeに最初から入っているButtonを使って丸ボタンを作ったのですが、androidだけ

丸の中に従来のボタンが内包された奇怪なボタンができてしまいました。

画像の通り、ものすごく気持ち悪い。

ButtonBaseの中でcolorプロパティをいじったりwidth/heightを変更・削除したりと試してみたの

ですが変わらず微動だにしない。まだreact-nativeの独特なcssの書き方に慣れていないのもあってか

中々作業が進まない。

ボタンごときで悩むのももったいないので公式や先人のブログでで推奨しているTouchableOpacityを使って装飾を変更することにしました。

</pre>
<View>
<TouchableOpacity style={ButtonText} onPress={props.press} ><Text>{props.text}</Text></TouchableOpacity>
</View>
<pre>

結果がこちら。こちらはしっかり希望の見た目をしていますね、100点あげます。

全コードがこちらです。

</pre>
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
const CircleButton = (props) => {
const { ButtonText } = styles;
return (
<View>
<TouchableOpacity style={ButtonText} onPress={props.press} ><Text>{props.text}</Text></TouchableOpacity>
</View>
);
};

const styles = {
ButtonText: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
alignItems: 'center',
width:100,
height: 100,
paddingTop: 15,
elevation: 2,
position: 'relative',
borderRadius:50,
borderWidth:1,
},
};
export default CircleButton;
<pre>

TouchableOpacityは本来自身の子要素に対してイベントを発火させるボタンなのですが今回

まさか違う用途で使うことになるとは思いませんでした。本来ならば押された時の装飾を変更したり画像にイベントを追加したり

と普通のButton機能では難しいこともできるので、今後アプリでオリジナルボタンを使いまわしたい・または

おしゃれなボタンを作りたい時は基本TouchableOpacityで間違いなさそうです。

逆にダイアログとかで使われるアプリ上であまり目立たないシーンはButtonでも十分だと思いました。

また姉妹品としてTouchableHighlightなるものがありますが性能は似たようなものなので、好みの問題になる

と思います。。