TouchableOpacityを使ってみる 【これからはじめるReact Native】

はじめに

以前、buttonコンポーネントとそのイベントについて解説しました。

buttonとイベント【これからはじめるReact Native】

今回もボタンに関するコンポーネントをご紹介します。
buttonと似ているTouchableOpacity コンポーネントを使用することでボタンが表示され、タップされると透明度が下がります。（より透明になる）

TouchableOpacity を使ってみる

では、早速TouchableOpacityを使ってみましょう。
今回作成するサンプルのイメージはこちらです。

コードの解説

いつものようにコードを見ていきます。

import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
こちらでTouchableOpacityコンポーネントをインポートしています。

state = { count: 0 }
stateのcountに0を設定しています。
おなじみの初期化処理ですね。

  onPress = () => {
    this.setState({
      count: this.state.count+1
    })
  }

こちらはonPressメソッドです。
stateのcountに、自分自身に1を足したものを設定しています。
（オートインクリメント）

<TouchableOpacity
 style={styles.button}
 onPress={this.onPress}
>
 <Text> Touch Here </Text>
</TouchableOpacity>

TouchableOpacityコンポーネントです。
onPressが実行された際に先程のonPressを設定しています。

 <Text style={[styles.countText]}>
    { this.state.count !== 0 ? this.state.count: null}
  </Text>

こちらはonPressでカウントアップした、stateのcountを表示しています。
Textの中には以前解説した三項演算子が記載されていますね。
stateのcountが0以外の場合にはstateのcountが表示され、countが0の場合にはnull、つまり何も表示されません。

まとめ

TouchableOpacityコンポーネントの動きは、styleを調整すればButtonコンポーネントでも実現はできます。
ですが、1つのコンポーネントでシンプルに実現可能なので、ぜひボタン関連のアクションで必要な場合には使ってみてください。