2018年3月26日

プログラミング

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

スライダーOGPスライダーOGP

目次

  1. はじめに
  2. Switchを使ってみる
  3. まとめ

はじめに

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

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

 

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

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

Sliderを使ってみる

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

Slider Gif

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

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

 

コードの解説

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

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

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

  state = {
    value: 50
  }

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

ちょっと一言

Sliderのvalueですが、デフォルト値は0です。
今回はスライダーの真ん中である50を指定しましたが、何も指定しなければ0である左端がスライダーの開始地点となります。

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

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

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イベントが発動して、statevalueSlidervalueが設定されます。

value

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

流れの振返り

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

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

まとめ

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

0

0

AUTHOR

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP