React Native Switch

17 Mar 2025 | 阅读 2 分钟

React Native Switch 是一个布尔控件组件，将其值设置为 true 或 false。它有一个 onValueChange 回调方法，用于更新其 value prop。如果 value prop 没有更改，则 Switch 组件将继续提供 value prop，而不是任何用户操作的预期结果。

Switch 的属性

Props	描述
disabled	这是一个布尔属性，如果设置为 true，则无法切换开关。其默认值为 false。
trackColor	它用于自定义开关轨道的颜色。
ios_backgroundColor	它在 iOS 中设置自定义背景颜色。背景可以在开关值禁用或开关为 false 时可见。
onValueChange	当开关值更改时调用。
testID	用于在端到端测试中定位此视图。
thumbColor	它为前景色开关手柄着色。当设置为 iOS 时，开关手柄将失去其阴影。
tintColor	它在 iOS 上设置边框颜色，在 Android 上设置开关关闭时的背景颜色。此属性已弃用；请使用 trackColor 代替它。
值	它是开关的值。当设置为 true 时，它会打开。默认值为 false。

React Native Switch 示例

在此示例中，我们最初将 Switch 值设置为 false，并显示带有“off”的文本。当通过调用 onValueChange 将 Switch 的值更改为 true 时，文本组件将重置为“on”。

App.js

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

export default class SwitchExample extends Component {
    state = {
        switchValue: false
    };

    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.textStyle}>Switch Example</Text>
                <Text style={styles.textStyle}>{this.state.switchValue ? 'on' :'off'}</Text>
                <Switch
                    value={this.state.switchValue}
                    onValueChange ={(switchValue)=>this.setState({switchValue})}/>
            </View>
        );
    }
}
const styles = StyleSheet.create ({
     container: {
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
     },
    textStyle:{
        margin: 24,
        fontSize: 25,
        fontWeight: 'bold',
        textAlign: 'center',
        color: '#344953'
    }
})

输出