- 切り替えスイッチを実装したい人
と言う方向けの記事になっています。
記事を読むことで、このようなボタンを実装することができます。
1. 概要
今回は、react-native-switch-selectorライブラリについて紹介していきます。
react-native-switch-selectorライブラリ
react-native-switch-selectorライブラリは、スイッチを簡単に実装することができるライブラリです。プロパティも豊富ですので、カスタマイズもでき、自分好みのスイッチを作ることが可能です。下記にgithubのリンクを貼っておきます。
react-native-switch-selector
2. インストール方法
下記のコマンドを実行してreact-native-switch-selectorライブラリをインストールします。
|
1 |
$ npm install --save react-native-switch-selector |
3. 使い方
3.1 import
‘react-native-switch-selector’ライブラリから「DraggableFlatList」コンポーネントをインポートします。
|
1 |
import SwitchSelector from "react-native-switch-selector"; |
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 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; import SwitchSelector from "react-native-switch-selector"; import Icon from 'react-native-vector-icons/Feather'; export default class App extends React.Component { constructor(props) { super(props); this.state = { gender: "1" }; } render() { const {gender} = this.state return ( <View style={{ flex: 1, paddingTop: 70, backgroundColor: gender == "1" ? 'hsla(210, 90%, 50%, 0.6)' : gender == "2" ? 'hsla(0, 90%, 60%, 0.9)' : 'hsla(210, 90%, 0%, 0.7)' }} > <SwitchSelector initial={0} onPress={value => this.setState({ gender: value })} textColor="purple" selectedColor="white" buttonColor="purple" borderColor="purple" hasPadding options={[ { label: "8:00", value: "1", customIcon: <Icon name="sun" size={18} style={{ marginRight: 10, marginTop:3, color: gender==1?"white":"black" }} /> }, { label: "18:00", value: "2", customIcon: <Icon name="sunset" size={18} style={{ marginRight: 10, marginTop:3, color: gender==2?"white":"black" }} /> }, { label: "22:00", value: "3", customIcon: <Icon name="moon" size={18} style={{ marginRight: 10, marginTop:3, color: gender==3?"white":"black" }} /> }, ]} /> <View style={{ flex: 1, justifyContent:'center', alignItems:'center' }} > {gender == "1" ? <Text style={styles.item_text}>朝</Text> : gender == "2" ? <Text style={styles.item_text}>夕方</Text> : <Text style={styles.item_text}>夜</Text>} </View> </View> ); } } const styles = StyleSheet.create({ item:{ width:100, height:100, borderRadius:8, backgroundColor:'hsla(210, 90%, 50%, 0.7)', justifyContent:'center', alignItems:'center', }, item_text:{ fontSize:60, color:'#FFFFFF', fontWeight: "bold" }, }); |
4.1 プロパティ
本ライブラリを使う時に設定するプロパティを一部紹介します。
＜SwitchSelector＞のプロパティ
| options | レンダリングする項目配列。各アイテムには、ラベルと値、 およびオプションのアイコンを設定することができます。詳しくは下記の表に記載。 |
| initial | 最初のレンダリングで選択されたアイテム |
| selectedColor | 選択したアイテムのカラーテキスト |
| buttonColor | 選択したアイテムの色 |
| textColor | 選択されていないアイテムのカラーテキスト |
| hasPadding | {true}の時、ボタンとボーダーの間に隙間を設ける |
| borderColor | ボーダーの色 |
| borderRadius | ボーダーの角 |
| borderWidth | ボーダーの幅 |
options
| options[].label | 各アイテムのラベル。設定必須 |
| options[].value | 各アイテムの値。設定必須 |
| options[].customIcon | アイコンを表示させたい時に設定 |
５. まとめ
このような切り替えスイッチを作りたいと言う方には、簡単にカスタマイズでき、デザインも良くおすすめのライブラリです。
