如何在React中切换屏幕后保持复选框选中

lstz6jyr  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(134)

我想在切换屏幕并返回后保持复选框处于选中状态。有人知道我将如何做到这一点吗?初始状态对所有这些都是false,但有没有办法在导航到不同的屏幕后保持它的更改?下面是我的代码:

import { KeyboardAvoidingView, Image, ScrollView, StyleSheet, Switch, Text, View, FlatList, TouchableOpacity, Button, Dimensions, Platform, TextInput } from 'react-native';
import React, { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import Checkbox from '../checkbox/Checkbox';

const Edit= props => {
        const [Sun, setSun] = React.useState(false);
        const [Mon, setMon] = React.useState(false);
        const [Tue, setTue] = React.useState(false);
        const [Wed, setWed] = React.useState(false);
        const [Thu, setThu] = React.useState(false);
        const [Fri, setFri] = React.useState(false);
        const [Sat, setSat] = React.useState(false);
    return (
        <View style={styles.EditBackground}>
            <Text style={styles.EditTitle}>Math-255</Text>

            <Text style={styles.InfoText}>Event Name and Instructor:</Text>

            <KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? "padding" : "height"}
                style={styles.writeTaskWrapper}
            >
                <TextInput style={styles.input} placeholder={'Event Name'} />
            </KeyboardAvoidingView>

            <KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? "padding" : "height"}
                style={styles.writeTaskWrapper}
            >
                <TextInput style={styles.input} placeholder={'Instructor (optional)'} />
            </KeyboardAvoidingView>

            <Text style={styles.InfoText}>Location:</Text>

            <KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? "padding" : "height"}
                style={styles.writeTaskWrapper}
            >
                <TextInput style={styles.input} placeholder={'Location (optional)'} />
            </KeyboardAvoidingView>

            <Checkbox
                style={styles.Checkbox}
                title="S"
                onPress={() => setSun(!Sun)}
                isChecked={Sun}
            />
            <Checkbox
                style={styles.Checkbox}
                title="M"
                onPress={() => setMon(!Mon)}
                isChecked={Mon}
              />
              <Checkbox
                style={styles.Checkbox}
                title="T"
                onPress={() => setTue(!Tue)}
                isChecked={Tue}
                
              />
              <Checkbox
                style={styles.Checkbox}
                title="W"
                onPress={() => setWed(!Wed)}
                isChecked={Wed}
              />
              <Checkbox
                style={styles.Checkbox}
                title="TH"
                onPress={() => setThu(!Thu)}
                isChecked={Thu}
              />
              <Checkbox
                style={styles.Checkbox}
                title="F"
                onPress={() => setFri(!Fri)}
                isChecked={Fri}
              />
              <Checkbox
                style={styles.Checkbox}
                title="S"
                onPress={() => setSat(!Sat)}
                isChecked={Sat}
              />

        </View>
        );
    }

    export default Edit;

我试过查找它,尝试一些不同的东西,但没有得到它的工作。

相关问题