Как использовать React Native Switch внутри функционального компонента? - PullRequest
Новая
       51

Как использовать React Native Switch внутри функционального компонента?

0 голосов
/ 23 февраля 2020

Я пытаюсь использовать компонент Switch , предоставленный Reaction-native , но он не переключается. 

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>
    );
}

Я получаю коммутатор обработанным в представлении я могу прикоснуться к нему, и он переходит из состояния ВЫКЛ во ВКЛ, но внезапно он возвращается в состояние ВЫКЛ, не оставляя его включенным.

Что не так?

1 Ответ

1 голос
/ 23 февраля 2020

Вам необходимо изучить основные понятия 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>
    );
}
...