反応ネイティブのチェックボックスの状態に基づいてコンポーネントを表示/非表示にする

設定ページでは、デフォルト値としてチェックボックスがオンになっています。ユーザーがチェックを外すと、アプリケーション内のすべての画像が非表示になり、ユーザーはアプリケーション全体で画像を表示できなくなります。チェックボックスの状態 (チェックされているかどうか) を制御する必要があると思います。チェックボックスをクリック/押すときにその値を変更し、その新しい値をすべてのアプリ ( 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>

2 番目のページ: 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 を実行できるかどうか疑問に思っていました。