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

はじめに

前回はローディング時のアクション、ActivityIndicatorコンポーネントの使い方をご紹介しました。
今回はSwitchコンポーネントを使ってみましょう。

Switchコンポーネントはその名の通り、スイッチボタンを作るコンポーネントです。

今回はこのSwitchを使い、またONとOFFがわかるようにアラートも出すようにしてみます。

Switchを使ってみる

今回開発するイメージはこちらです。
スイッチがONになると、スイッチがONであることがアラート表示され、スイッチがOFFになるとそちらもアラート表示されます。

今までと同じように、Snack Expo を立ち上げましょう。
https://snack.expo.io/

こちらを実現しているExpoのコードはこちらです。

コードの解説

今回もコードのポイントを解説していきます。

import { Switch, Text, View, StyleSheet } from 'react-native';

こちらでSwitchコンポーネントをインポートしています。

  state = {
    switching: false
  }

stateの初期化処理です。
switchingにfalseを初期値として設定しています。
これを後ほどSwitchコンポーネントの表示状態を表すvalueに設定します。

switchValue = (value) => {
  this.setState({ switching: value });
  const switchText = value ? 'ON' : 'OFF';
  alert(`今の状態はスイッチ${switchText}です`);
}

ここはスイッチボタンを押されて状態が変わった際に呼ばれるメソッドです。
this.setState({ switching: value }); でswitching に value を設定しています。
ここでの引数valueですが、後ほども解説しますが、スイッチの状態が入ってきます。

const switchText = value ? 'ON' : 'OFF';
こちらは前回解説したconstを使用し、switchTextという変数に値を設定しています。
value ? 'ON' : 'OFF'; の部分は三項演算子と呼ばれ、
条件 ? 'trueのときの出力:falseのときの出力という書き方で表されます。
つまり、今回の場合はvalueがtrueのときはON、falseのときはOFFが出力される為、どちらかの値が変数であるswitchTextに設定されるという処理です。

alert(`今の状態はスイッチ${switchText}です`);

こちらではスイッチの状態をアラートで表示していますが、ポイントはテンプレートリテラルを使用している点です。
テンプレートリテラルとは、バッククオート（`）で囲むことで文字列を表すことができることはもちろん、変数の表示や計算なども行うことができます。
変数や計算式を出力する場合は、${変数} このように${} で囲みます。

    const switching = this.state.switching

こちらではswitchingという変数にstateのswitchingを設定しています。
敢えてstateを変数に設定しているのは前回の記事で解説しましたね。

 <Switch
  onValueChange = {this.switchValue}
  value={switching}
 />

最後はSwitchコンポーネントです。
onValueChange = {this.switchValue} はvalueの値が変わったタイミング際のイベントを設定します。
ここでは先述のswitchValue を呼び出しています。
そしてvalue = {switching} では、先程の変数で設定したstateのswitchingを設定しています。

流れの振返り

今回は少し流れが複雑だったので、振返りをしましょう。

1. まず初期化処理でstateのswitchingにfalseを代入する。
2. stateのswitchingの値をrender() 関数のswitching変数に代入する。
3. Switchコンポーネントで、value に switching（false） が代入される。
4. スイッチが押される
5. SwitchコンポーネントのonValueChangeが発動し、stateのswitchingにtrueが代入され、ON用のアラートが表示される。
6. Switchコンポーネントのvalueにswitching（5で設定したstateのswitching）が代入され、スイッチオンの表示がされる。

まとめ

スイッチは、例えばプッシュ通知のオンオフ設定など「オンとオフを切り替える処理」に多く使われます。
小さなパーツではありますがぜひ使いこなせるようにしてみてください。