react-native - 如何在功能组件中使用 React Native Switch？

Question

我正在尝试使用react-native提供的Switch组件，但它不会切换。

function settings(props) {
    let {changeView, header} = props;
    let rememberPin = false;
    let toggleRememberPin = (value) => {
        rememberPin = value;
    };
    return (
        <View style={styles.appContainer}>
            <View style={styles.appBody}>
                <View style={{flex:1, flexDirection: 'row',justifyContent:'center',alignItems:'center',width: Dimensions.get('screen').width,backgroundColor: Colors.white}}>
                    <Text>Remember PIN:</Text>
                    <Switch
                        onValueChange={toggleRememberPin}
                        value={rememberPin}
                        ios_backgroundColor="#aeaeae"
                        trackColor={{true: Colors.customerGreen, false: '#aeaeae',}}/>
                </View>
            </View>
        </View>
    );
}

我在视图中渲染了 Switch，我可以触摸它，它从 OFF 变为 ON，但突然它又回到 OFF 而不保持 ON 状态。

怎么了？

标签： react-nativestatetoggle

Answer 1

你需要研究 React 的核心概念，尤其是组件状态是如何工作的。

简而言之，正常的变量赋值不会导致组件重新渲染和反映更改。这就是你想要使用状态概念的时候。

以下是如何正确执行此操作：

function Settings(props) {
    let {changeView, header} = props;
    const [rememberPin, setRememberPin] = useState(false);

    const toggleRememberPin = (value) => {
        setRememberPin(value);
    };

    return (
        <View style={styles.appContainer}>
            <View style={styles.appBody}>
                <View style={{flex:1, flexDirection: 'row',justifyContent:'center',alignItems:'center',width: Dimensions.get('screen').width,backgroundColor: Colors.white}}>
                    <Text>Remember PIN:</Text>
                    <Switch
                        onValueChange={toggleRememberPin}
                        value={rememberPin}
                        ios_backgroundColor="#aeaeae"
                        trackColor={{true: Colors.customerGreen, false: '#aeaeae',}}/>
                </View>
            </View>
        </View>
    );
}