1

在设置页面中,我将一个复选框选中为默认值。如果用户取消选中它,那么应用程序中的所有图像都将被隐藏,用户将无法看到整个应用程序中的任何图像。我想我需要控制复选框的状态(选中与否),在单击/按下复选框时更改该值,将该新值传递给所有应用程序(如何?),然后根据该值我可以决定是否显示图像。

所以基本上,我的问题是访问该状态值,然后决定显示什么。这是我在设置页面中使用的代码:

设置页面:

     constructor(props) {
                super(props);

                this.state ={
                    status:false
                }
            };

        toggleStatus(){
            this.setState({
                status:!this.state.status
            });

 //I even hardcoded it to false but i keep getting null 

       AsyncStorage.setItem('myCheckbox',JSON.stringify(false));
                //AsyncStorage.setItem('myCheckbox',JSON.stringify(this.state.status));

                }
        ...
        render() {
        return(
        <TouchableOpacity onPress={()=>this.toggleStatus()}>
            <Text>
                press me to change state 
            </Text>
        </TouchableOpacity>

第二页:我需要访问存储在 asyncStorage 中的值

componentDidMount() {
        const value =   AsyncStorage.getItem('myCheckbox', (value) => {
            JSON.parse(value) 
            console.log("my check box value ", value)
        });

    }

我不断进入控制台: 在此处输入图像描述

这段代码工作正常,每次我按下它时它都会将状态的值从 false 更改为 true

UPDATE试图在设置页面中存储一个简单的字符串而不等待:

 toggleStatus() {
        this.setState({
            status: !this.state.status
        });
        AsyncStorage.setItem("myCheckbox", "save me");

        console.log("in the toggle status function", this.state.status)
    }

在我使用的页面中:

componentDidMount(){

        let value = AsyncStorage.getItem("myCheckbox")

        console.log('in the other page i get ', value)

        }

我进入控制台:在此处输入图像描述 怎么了?!

PS:我正在使用本机基础,我想知道是否可以在复选框本身而不是 touchableOpacity 中执行 onPress

4

2 回答 2

1

您可能应该使用 redux

http://redux.js.org/

于 2017-05-23T19:13:03.850 回答
0

您可以AsyncStorage用作全局storage机制。

在这种情况下,访问应用程序任何其他部分中的变量。

try {
  const value = await AsyncStorage.getItem('myCheckbox');
  if (value !== null){
    console.log(value);
  }
} catch (error) {
  // Error retrieving data
}

并将其保存在toggleStatus

您可以使用:

try {
  await AsyncStorage.setItem('myCheckbox', 'myValue');
} catch (error) {
  // Error saving data
}

因此,每次您打开和关闭应用程序时,它都会像以前一样处于可用状态。你可以从react-native.

import { AsyncStorage } from 'react-native';
于 2017-05-23T13:53:42.487 回答