React Native 开关

摘要: 本教程将教您如何使用 React Native Switch 组件创建切换开关。

React Native Switch 组件简介

Switch 组件允许您创建切换开关，它可以在两种状态之间切换：开和关。

以下是使用 Switch 组件的步骤

首先，从 react-native 库中导入 Switch 组件

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

其次，使用 useState 钩子创建一个布尔类型的状态变量，以跟踪开关是否打开。

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

第三，定义一个函数来切换 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 指定轨道颜色，作为一个带有两个键的对象

• false 设置开关关闭时的轨道颜色。
• true 是开关打开时的轨道颜色。

ios_backgroundColor

此 prop 设置 Switch 关闭或禁用的背景颜色。

例如，以下示例展示了如何使用 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 组件创建切换开关。