React NativeのSwitchSelectorコンポーネントとは？基本の使い方と実装例を解説

React NativeのSwitchSelectorは、ラジオボタンのようなトグル形式の選択コンポーネントです。2つ以上の選択肢の中から1つを選ばせるUIを実現でき、性別の選択やカテゴリの切り替えなど、さまざまな場面で活用できます。

SwitchSelectorのインストール

SwitchSelectorを使用するには、まず以下のコマンドでパッケージをインストールします。

npm i react-native-switch-selector --save-dev

基本的な使い方

もっともシンプルなSwitchSelectorの記述例は以下の通りです。

<SwitchSelector
    options={youroptions}
    initial={0}
    onPress={value => console.log(`選択された値: ${value}`)}
/>

SwitchSelectorの主なprops一覧

実装例1：男女を選択できるSwitchSelector

まず、SwitchSelectorをインポートします。

import SwitchSelector from "react-native-switch-selector";

この例では「女性／男性」の2つの選択肢を表示します。あらかじめ用意した男性・女性の画像を読み込み、options配列にimageIconとして設定しています。

let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');
const images = {
    "female": female,
    "male": male,
};
const options =[
    { label: "Female", value: "f", imageIcon: images.female },
    { label: "Male", value: "m", imageIcon: images.male }
];

SwitchSelector本体は次のように記述します。

<SwitchSelector
    initial={0}
    onPress={value => this.setState({ gender: value })}
    textColor='#ccceeaa'
    selectedColor='#7a44cf'
    buttonColor='#ccc'
    borderColor='#ccc'
    hasPadding
    options={options}
/>

ここまでの内容をまとめた完全なソースコードがこちらです。

サンプルコード

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";
let male = require('C:/myfirstapp/myfirstapp/assets/male.png');
let female = require('C:/myfirstapp/myfirstapp/assets/female.png');
const images = {
    "female": female,
    "male": male,
};
const options =[
    { label: "Female", value: "f", imageIcon: images.female },
    { label: "Male", value: "m", imageIcon: images.male }
];
export default class MySwitchSelectorComponent extends Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <SwitchSelector
                    initial={0}
                    onPress={value => this.setState({ gender: value })}
                    textColor='#ccceeaa'
                    selectedColor='#7a44cf'
                    buttonColor='#ccc'
                    borderColor='#ccc'
                    hasPadding
                    options={options}
                />
            </SafeAreaView>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
});

実行結果

アプリを実行すると、以下のようなSwitchSelectorが表示されます。

実装例2：3つの選択肢を持つSwitchSelector

SwitchSelectorは3つ以上の選択肢にも対応しています。次の例では、3つの選択肢を定義しています。

const options =[
    { label: "First", value: "a"},
    { label: "Second", value: "b" },
    { label: "Third", value: "c" }
];

3つの選択肢を表示する場合の完全なコードは以下の通りです。

サンプルコード

import React, { Component } from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import SwitchSelector from "react-native-switch-selector";
const options =[
    { label: "First", value: "a"},
    { label: "Second", value: "b" },
    { label: "Third", value: "c" }
];
export default class MySwitchSelectorComponent extends Component {
    render() {
        return (
            <SafeAreaView style={styles.container}>
                <SwitchSelector
                    initial={0}
                    onPress={value => this.setState({ gender: value })}
                    textColor='#ccceeaa'
                    selectedColor='#7a44cf'
                    buttonColor='#ccc'
                    borderColor='#ccc'
                    fontSize='30'
                    hasPadding
                    options={options}
                />
            </SafeAreaView>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1
    }
});

実行結果

まとめ

SwitchSelectorを使えば、少ないコード量で直感的に操作できる複数選択UIを実装できます。optionsで選択肢を定義し、onPressで選択値を受け取るのが基本の流れです。色やフォントサイズなどのpropsを組み合わせれば、アプリのデザインに合わせた柔軟なカスタマイズも可能です。