Сделать/создать компонент флажка в реакции родной

Я столкнулся с некоторыми проблемами с флажком собственной базы и AsynStorage. Фактически, AsynStorage по умолчанию принимает только строки, НО также может хранить логические переменные, я пытался использовать этот метод, но каждый раз сохраняю строку. Хотя флажок принимает только логические переменные и выдает предупреждение, если я пытаюсь использовать строку, и он не показывает предыдущее состояние флажка (установлен или нет). Итак, я решил сделать свой собственный флажок, используя TouchbleOpacity. Ребята, у вас есть идеи, как это сделать? Вот результат, которого я хочу достичь: введите здесь описание изображения

Итак, цель состоит в том, чтобы создать страницу настроек флажка, которая управляет стилем текста на другой странице, и получить флажок, оставленный в предыдущий раз, например: если я проверяю его, я меняю страницу и снова возвращаюсь к страница настроек, мне нужно, чтобы она была отмечена (с указанием предыдущего состояния). Код находится на странице настроек:

toggleStatus() {
        this.setState({
            status: !this.state.status
        });
        AsyncStorage.setItem("myCheckbox",JSON.stringify(this.state.status));
    }
// to get the previous status stored in the AsyncStorage 
componentWillMount(){
        AsyncStorage.getItem('myCheckbox').then((value) => {
            this.setState({
                status: value
            });
            if (this.state.status == "false") {
                this.setState({
                    check: false
                });
            }
            else if (this.state.status == "true") {
                this.setState({
                    check: true
                });
            }
            if (this.state.status == null) {
                this.setState({
                    check: false
                });
            }
        }); 
    }
render {
return(
 ...

                            <CheckBox
                                onPress={() => { this.toggleStatus() }
                                checked={ this.state.check }/>

)}

На другой странице:

componentDidMount(){
        AsyncStorage.getItem('myCheckbox').then((value) => {
            JSON.parse(value)
            this.setState({
                status: value
            });

        });

    }

Этот код меняет статус после ДВА щелчка, и я не знаю почему, и я получаю этот странный вывод в консоли каждый раз, когда я устанавливаю флажок введите здесь описание изображения


react-native state button checkbox checked
person user3521011    schedule 31.05.2017    source источник
comment
Я думаю, что может быть лучше взглянуть на то, как вы храните/извлекаете данные из AsyncStorage, а не заново изобретаете колесо для флажка. Я бы сохранял данные через JSON.stringify(myVal) и извлекал с помощью JSON.parse(fromStorage) — таким образом вы можете хранить сложные объекты и поддерживать типы.   -  person Andrew Breen    schedule 01.06.2017

Ответы (1)


arrow_upward
0
arrow_downward

Если вы посмотрите на документацию по AsyncStorage, вы увидите, что на самом деле метод getItem() всегда будет возвращать строку (внутри промиса).

Для проблемы с AsyncStorage вам следует попытаться проанализировать эту строку, возвращенную в логическое значение, с помощью этот метод объясняется здесь, а затем используйте это проанализированное значение внутри флажка нативной базы.

Но если вы хотите сделать свой собственный компонент, попробуйте сделать что-то вроде этого:

export default class Checkbox extends Component {
    constructor(){
        super();
        this.state = { checked: false }
    }

    render(){
        return(
        <TouchableOpacity
        onPress={()=>{
            this.setState({ checked : !this.state.checked });
        }}    
        >
            <Image source={this.state.checked ? require('checkedImagePath') : require('uncheckedImagePath')} />
        </TouchableOpacity>
        );
    }
}

Вам нужно будет установить стиль для этого изображения, чтобы настроить его так, как вы хотите.

-- На основе вашего издания:

Я не вижу ничего плохого в вашем методе toggleStatus() на странице настроек, но попробуйте изменить свой componentWillMount() на это:

componentWillMount(){
    AsyncStorage.getItem('myCheckbox').then((value) => {
        if (value != null){
            this.setState({
                check: (value == 'true')
            });
        }
    }); 
}

Однако на другой странице строка, которую вы выполняете JSON.parse(value), ничего не делает, если вы нигде не сохраняете результат.

person Pedro Neri    schedule 01.06.2017
comment
эй .. спасибо, на самом деле я сделал, чтобы сохранить статус в виде строки (что я и сделал), а затем преобразовать его в строку .. НО это не работает, и я не знаю, почему .. Я также попробовал ваше второе решение, и оно статус не меняется мгновенно, и он всегда возвращается к проверенному изображению ... Пожалуйста, проверьте мое редактирование в вопросе, чтобы увидеть, что я пробовал. - person user3521011; 01.06.2017