根据本机中的复选框状态显示/隐藏组件-Java 学习之路

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

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

设置页面：

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

    }

我一直在控制台：
enter image description here

这段代码工作正常，每当我按下它时，它会将状态值从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)

        }

我进入控制台：
enter image description here
出了什么问题？！

PS：我使用原生基础，我想知道我是否可以在复选框本身而不是touchableOpacity中执行onPress

2 回答

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';
```
回复于 2024-05-06T21:25:31+08:00
1

你应该使用redux

http://redux.js.org/

回复于 2024-05-06T21:25:31+08:00

根据本机中的复选框状态显示/隐藏组件

2 回答

相关问题