React Native スイッチ

概要: このチュートリアルでは、React Native の Switch コンポーネントを使用してトグルスイッチを作成する方法を学びます。

React Native Switch コンポーネントの紹介

Switch コンポーネントを使用すると、オンとオフの2つの状態を切り替えることができるトグルスイッチを作成できます。

Switch コンポーネントを使用する手順は次のとおりです

まず、react-native ライブラリから Switch コンポーネントをインポートします

import { Switch } from 'react-native';Code language: JavaScript (javascript)

次に、useState フックを使用して、スイッチがオンかオフかを追跡するためのブール型の状態変数を作成します

const [isEnabled, setIsEnabled] = useState(false);Code language: JavaScript (javascript)

3番目に、Switch を切り替える関数を定義します。この関数は、Switch コンポーネントの現在の状態を否定します

const toggleSwitch = () => setIsEnabled(!isEnabled);Code language: JavaScript (javascript)

最後に、isEnabled 状態変数と toggleSwitch 関数を Switch コンポーネントの props に渡します

<Switch 
   value = {isEnabled }
   onValueChange={toggleSwitch}
/> Code language: HTML, XML (xml)

完全なアプリは次のとおりです

import React, { useState } from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

const SwitchDemo = () => {
    const [isEnabled, setIsEnabled] = useState(false);

    const toggleSwitch = () => setIsEnabled(!isEnabled);

    return (
        <View style={styles.container}>
            <Text style={styles.text}>{isEnabled ? 'Switch is ON' : 'Switch is OFF'}</Text>
            <Switch
                onValueChange={toggleSwitch}
                value={isEnabled}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 18,
        marginBottom: 10,
    },
});

export default SwitchDemo;
Code language: JavaScript (javascript)

出力

Switch コンポーネントのスタイル設定

Switch コンポーネントには、外観を変更できる props が用意されています。次のものがあります。

• thumbColor
• trackColor
• ios_backgroundColor (iOS のみに関連)

thumbColor

thumbColor は、スイッチグリップの前景色を指定します。iOSで thumbColor を設定すると、スイッチグリップのドロップシャドウが表示されなくなります。

Switch の状態と組み合わせることで、スイッチがオンまたはオフのときにサムカラーを設定できます。

trackColor

trackColor は、次の2つのキーを持つオブジェクトとしてトラックの色を指定します

• false は、Switch がオフのときのトラックの色を設定します。
• true は、Switch がオンのときのトラックの色です。

ios_backgroundColor

この prop は、Switch の背景色を false または無効として設定します。

たとえば、次の例は、thumbColor、trackColor、および ios_backgroundColor の props を変更する方法を示しています

import React, { useState } from 'react';
import { StyleSheet, Text, View, Switch } from 'react-native';

const SwitchDemo = () => {
    const [isEnabled, setIsEnabled] = useState(false);

    const toggleSwitch = () => setIsEnabled(!isEnabled);

    return (
        <View style={styles.container}>
            <Text style={styles.text}>{isEnabled ? 'Switch is ON' : 'Switch is OFF'}</Text>
            <Switch
                onValueChange={toggleSwitch}
                value={isEnabled}
                trackColor={{ false: '#ddd', true: '#f6706b' }}
                thumbColor={isEnabled ? '#fbd0cf' : '#fff'}
                ios_backgroundColor="#ddd"
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
    text: {
        fontSize: 18,
        marginBottom: 10,
    },
});

export default SwitchDemo;
Code language: JavaScript (javascript)

出力

概要

• Switch コンポーネントを使用して、トグルスイッチを作成します。