Question

我一直在面对本机基础复选框和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
            });

        });

    }

此代码会在两次点击后更改状态，我不知道为什么，每次单击复选框时我都会在控制台中看到这个奇怪的输出p>

Answer 1

如果你看一下AsyncStorage documentation，你可以看到，事实上，方法getItem（）将始终返回一个字符串（在promise中）。

对于AsyncStorage的问题，您应该考虑尝试使用this method explained here解析返回到布尔值的此字符串，然后在本机库复选框内使用此解析的值。

但是如果你想做自己的组件，尝试做这样的事情：

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）的行就什么都不做。

在本机中生成/创建复选框组件

1 个答案: