Button 在react native中生成/创建复选框组件

我一直面临一些有关native base复选框和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 }/>

)}

这段代码在两次单击后改变了状态，我不知道为什么，我在控制台中得到了这种奇怪的输出，每次我单击复选框时，如果你看一下，你会发现，实际上，方法getItem（）总是返回一个字符串（在承诺内）

对于AsyncStorage的问题，您应该考虑尝试解析返回到布尔的字符串，然后在原生基复选框中使用这个解析值。< /P> 但是，如果您想创建自己的组件，请尝试执行以下操作：

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

---

但是，在另一页中，如果您没有将结果存储在任何位置，那么您执行JSON.parse（value）这一行就什么也不做了。

我认为最好看看您从AsyncStorage存储/检索数据的方式，而不是重新发明复选框的轮子。我将通过

JSON.stringify（myVal）

存储数据，并使用

JSON.parse（fromStorage）

检索数据，这样您就可以存储复杂对象并维护类型。嘿。。谢谢你，实际上我把状态存储为字符串（我这样做了），然后把它转换成字符串..但是它不起作用，我不知道为什么。。我还尝试了你的第二个解决方案，它不会立即改变状态，并且总是返回到选中的图片…请检查我在问题中的编辑以查看我尝试了什么。

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

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