在本机反应中制作/创建复选框组件

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

        });

    }

这段代码在两次点击后改变了状态，我不知道为什么，每次点击复选框时我都会在控制台中得到这个奇怪的输出

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) 的行什么也不做，一旦您没有将结果存储在任何地方。