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

はじめに

前回はスイッチのオンオフを設定できる、Switchコンポーネントの使い方をご紹介しました。
今回はSliderコンポーネントを使ってみましょう。

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

Sliderコンポーネントもその名の通り、スライダーを作るコンポーネントです。
このように、つまみを左右にずらすことで値を変えることができます。

今回はこのSliderを使い、その数値も表示されるようなサンプルを作っていきます。

Sliderを使ってみる

今回開発するイメージはこちらです。
スライダーのつまみを左右にさせると、値も変動するというものです。

では、今回もSnack Expo を立ち上げましょう。

今回のコードはこちらです。

コードの解説

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

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

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

  state = {
    value: 50
  }

お馴染みになってきましたね。
stateの初期化処理です。
valueに50を初期値として設定しています。
スライダーの初期値として50を設定しています。

changeValue = (value) => {
this.setState({
  value: value
});
}

今までも似たようなケースを何回か見てきましたが、今回も値が変更されたら発生するイベントを設定します。
stateのvalueにvalueが設定されます。後ほど見ていく、スライダーのつまみの数値が設定されます。

const value = this.state.value;

何回かこのシリーズで出てきていますが、stateの値を変数に設定しています。

<Slider
  step={1}
  maximumValue={100}
  onValueChange={this.changeValue}
  value={value}
/>

最後はSliderコンポーネントです。
1つずつpropsを見ていきます。

step

stepはつまみを調節することでの数値（value）の増減単位となります。
では、ここでstepを10にしてみてください。
つまみを右に10ずらすと数値が増え、左にずらすと10減るはずです。

maximumValue

maximumValueはその名の通り、最大値を表しています。
今回は100を最大値（一番右の値）としていますが、当然これも変更可能です。

今回は省略しましたが、反対のminimumValueも存在します。指定しない場合の初期値は0です。

onValueChange

こちらは値が変化した場合に発動するイベントを設定することができます。
今回の場合は、changeValueイベントが発動して、stateのvalueにSliderのvalueが設定されます。

value

スライダーの値です。
実際はコントロールする値をドラッグするたびに変更するものではなく、初期値の設定のみで問題ないと考えてください。

流れの振返り

では、今回も流れの振返りをしましょう。

1. まず初期化処理でstateのvalueに50を設定する。
2. stateのvalueの値をvalue変数に設定する。
3. Sliderコンポーネントで、value に value（50） が設定される。
4. スライダーが動かされる
5. SliderコンポーネントのchangeValueが発動し、stateのvalueに動かされたつまみ分の値（value）が設定される。
6. Textコンポーネントにvalueが設定され、つまみで動かした値が表示され続ける。

まとめ

スライダーは値の設定などにとても向いています。
例えば体重の増減など、テキストとして直接打つのは少し面倒で、つまみを動かすだけで設定を簡単にしたい場合 などに向いています。
またつまみで動かした値はサーバやアプリケーション側に保存しておくなど、少し高度な方法についても今後説明していきます。