今回は、決められた範囲から値を取得することができる「Slider」コンポーネントについて紹介します。
本記事を読むことで、このようなアプリを実装することができます。
1. ライブラリのインストール
以下のコマンドを実行して、インストールします。
|
1 |
npm install @react-native-community/slider --save |
2. Sliderコンポーネントの使い方
2.1 インポート
Sliderコンポーネントをインポートします
|
1 |
import Slider from '@react-native-community/slider'; |
2.2 基本的な使い方
Sliderコンポーネントの基本的な使い方は、
value
に初期値を設定し、
minimumValue
に最小値、
maximumValue
に最大値を設定します。
onValueChange={(value) => this.setState({ value: value })}
を使うことで、スライダーの値が変化した時に、state変数に値を設定することができます。
2.3 プロパティ
Sliderコンポーネントで主に設定するプロパティを紹介します。
| プロパティ名 | デフォルト値 | 説明 |
| style | – | スライダーのスタイル、レイアウトを設定 |
| disabled | false | trueの時、スライダーを操作できなくする |
| value | 0 | スライダーの初期値 |
| maximumValue | 0 | スライダーの初期最小値 |
| maximumValue | 1 | スライダーの初期最大値 |
| step | 0 | スライダーのステップ値。 スライダーのボタンを動かすことができる間隔。 例えば、ステップ数10の場合、値は10ずつ増減する |
| minimumTrackTintColor | 青色 | ボタンの左側のトラックに使用される色 |
| maximumTrackTintColor | 灰色 | ボタンの右側のトラックに使用される色 |
| thumbTintColor | 白色 | ボタンの色 |
| inverted | false | スライダーの方向を逆にする |
あとは、操作中に呼び出されるイベントや画像など設定することが可能です。
詳しく知りたいと言う方は、以下のGitHubのサイトを参考にしてください。
react-native-slider
(スライダー自体の大きさを変更することは、できないみたいですね…。)
2.4 サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
import React from 'react'; import { Text, View, StyleSheet } from 'react-native'; import Slider from '@react-native-community/slider'; export default class App extends React.Component { constructor(props) { super(props); this.state = { size: 10, color: 255 }; } render() { return ( <View style={styles.container}> <View style={styles.textView}> <Text style={[styles.text, { fontSize: this.state.size, color: this.state.color }]}> {this.state.size} </Text> </View> {/* サイズ */} <Slider style={styles.slider} value={this.state.size} step={1} minimumValue={10} maximumValue={100} onValueChange={(size) => this.setState({ size: size })} minimumTrackTintColor="red" /> {/* 色 */} <Slider style={styles.slider} value={this.state.color} step={1} minimumValue={0} maximumValue={255} onValueChange={(color) => this.setState({ color: color })} minimumTrackTintColor="aqua" /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: "center", }, slider: { width: 300, alignSelf: "center", marginTop: 50, }, textView: { justifyContent: "center", borderColor: "black", borderWidth: 1, borderRadius: 100, width: 200, height: 200 }, text: { fontSize: 50, textAlign: 'center', }, }); |
結果
3. 参考
今回紹介した、「react-native-slider」のGitHubのリンクです。
react-native-slider
4. まとめ
今回は、スライダーを使った基本的な使い方について紹介しました。
次は、スライダーを使って色を変更する機能について紹介していきます。
