Bygga en beständig inställningsskärm
Skapa en inställningsskärm med växlare för aviseringar och mörkt läge, spara varje inställning i AsyncStorage och återställ inställningarna när appen startar.
Bygga en beständig inställningsskärm är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 3 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad en beständig inställningsskärm gör
En beständig inställningsskärm låter användare konfigurera appinställningar — till exempel mörkt läge, aviseringar eller språk — och behålla dessa inställningar efter omstarter av appen. Inställningarna sparas i AsyncStorage när de ändras och läses in igen vid starten. Detta är ett av de vanligaste mönstren i alla produktionsappar byggda med React Native.
Definiera inställningarnas state
Börja med att definiera ett TypeScript-gränssnitt för inställningsobjektet och en konstant med namnet DEFAULT_SETTINGS, som används när det inte finns några sparade inställningar (vid första starten). Om standardvärdena finns i en konstant blir det enkelt att göra en säker återgång och att referera till den ursprungliga strukturen i typvakter och migreringslogik.
interface Settings {
darkMode: boolean;
notificationsEnabled: boolean;
fontSize: 'small' | 'medium' | 'large';
}
const DEFAULT_SETTINGS: Settings = {
darkMode: false,
notificationsEnabled: true,
fontSize: 'medium',
};
const SETTINGS_KEY = 'app_settings';Läs in inställningar när skärmen monteras
I en useEffect med en tom beroendearray läser du inställningarna från AsyncStorage, parsar JSON och placerar resultatet i komponentens state. Visa en ActivityIndicator medan inläsningen pågår, så att användaren inte tillfälligt ser standardvärden innan de riktiga inställningarna visas.
const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
const [loading, setLoading] = React.useState(true);
useEffect(() => {
async function loadSettings() {
const json = await AsyncStorage.getItem(SETTINGS_KEY);
if (json) {
setSettings({ ...DEFAULT_SETTINGS, ...JSON.parse(json) });
}
setLoading(false);
}
loadSettings();
}, []);Spara inställningar när de ändras
Skapa en hjälpfunktion som slår samman den nya inställningen med det aktuella inställningsobjektet och skriver resultatet till AsyncStorage. Anropa funktionen från ändringshanteraren för varje UI-kontroll, så att inställningarna sparas direkt efter varje användarinteraktion. En inställningsskärm behöver ingen separat knapp för att spara.
async function updateSetting<K extends keyof Settings>(key: K, value: Settings[K]) {
const updated = { ...settings, [key]: value };
setSettings(updated);
await AsyncStorage.setItem(SETTINGS_KEY, JSON.stringify(updated));
}Rendera reglaget för mörkt läge
Använd React Natives Switch-komponent för booleska inställningar. Bind dess value-prop till state och anropa updateSetting i onValueChange. Gränssnittet uppdateras direkt via state medan AsyncStorage sparar i bakgrunden, vilket ger en responsiv upplevelse utan att användaren behöver vänta på att skrivningen ska slutföras.
<View style={styles.row}>
<Text style={styles.label}>Dark Mode</Text>
<Switch
value={settings.darkMode}
onValueChange={(value) => updateSetting('darkMode', value)}
trackColor={{ false: '#ccc', true: '#6200ee' }}
thumbColor={settings.darkMode ? '#fff' : '#f4f3f4'}
/>
</View>Rendera ett reglage för aviseringar
Lägg till ytterligare en rad med en Switch för aviseringsinställningen enligt samma mönster. Genom att återanvända samma hjälpfunktion, updateSetting, hålls koden DRY — du behöver bara ändra nyckelargumentet för att rikta in dig på en annan inställning. Detta mönster kan skalas till valfritt antal booleska inställningar utan duplicerad sparlogik.
<View style={styles.row}>
<Text style={styles.label}>Notifications</Text>
<Switch
value={settings.notificationsEnabled}
onValueChange={(value) => updateSetting('notificationsEnabled', value)}
/>
</View>Välj teckenstorlek med Pressable-alternativ
För en enum-inställning som teckenstorlek renderar du en rad med Pressable-knappar, en för varje alternativ. Markera det aktuella alternativet med en annan bakgrundsfärg. När användaren trycker på en knapp anropas updateSetting med det nya värdet. På så sätt skapas en kompakt och tillgänglig väljarkontroll utan en fullständig rullgardinsmeny.
const fontSizes: Settings['fontSize'][] = ['small', 'medium', 'large'];
<View style={styles.row}>
<Text style={styles.label}>Font Size</Text>
<View style={styles.optionRow}>
{fontSizes.map((size) => (
<Pressable
key={size}
onPress={() => updateSetting('fontSize', size)}
style={[
styles.option,
settings.fontSize === size && styles.optionSelected,
]}
>
<Text>{size}</Text>
</Pressable>
))}
</View>
</View>Tillämpa inställningar globalt med Context
För att mörkt läge ska påverka hela appen måste inställningarna delas globalt. Läs in inställningarna vid appens rot (i App.tsx) och lagra dem i en SettingsContext. Alla skärmar som behöver det aktuella temat kan läsa från context i stället för att läsa in data från AsyncStorage varje gång. Endast roten läser in data från lagringen en gång vid starten.
// App.tsx
const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
useEffect(() => {
loadSettings().then(setSettings);
}, []);
return (
<SettingsContext.Provider value={{ settings, updateSetting }}>
<NavigationContainer theme={settings.darkMode ? DarkTheme : DefaultTheme}>
<AppNavigator />
</NavigationContainer>
</SettingsContext.Provider>
);Knapp för att återställa standardvärden
Lägg till en knapp med texten ”Återställ standardvärden” längst ned på inställningsskärmen. När användaren trycker på den anropar den AsyncStorage.removeItem för att ta bort de sparade inställningarna och återställer det lokala state-värdet till DEFAULT_SETTINGS. Bekräfta åtgärden med en Alert innan återställningen genomförs, eftersom den kan innebära att data går förlorade.
function handleReset() {
Alert.alert('Reset Settings', 'Restore all settings to their defaults?', [
{ text: 'Cancel', style: 'cancel' },
{
text: 'Reset',
style: 'destructive',
onPress: async () => {
await AsyncStorage.removeItem(SETTINGS_KEY);
setSettings(DEFAULT_SETTINGS);
},
},
]);
}Testa beständighet efter omstarter
Kontrollera att inställningarna faktiskt finns kvar genom att ändra en inställning, stänga appen helt (inte bara lägga den i bakgrunden), öppna den igen och kontrollera att det ändrade värdet visas. I Expo Go kan du testa detta genom att tvångsavsluta appen. I en utvecklingsversion skakar du enheten för att öppna utvecklingsmenyn och läser sedan in appen igen för att simulera en ny start samtidigt som AsyncStorage-data behålls.
Fullständig struktur för inställningsskärmen
Här är den fullständiga strukturen för en inställningsskärm som kombinerar alla mönster från den här lektionen. Skärmen läser in inställningar när den monteras, renderar reglage och väljare som anropar updateSetting, använder stilar som tar hänsyn till inställningen för mörkt läge och innehåller en återställningsknapp längst ned. Den här mallen kan anpassas efter inställningarna i vilken app som helst.
export default function SettingsScreen() {
const [settings, setSettings] = React.useState<Settings>(DEFAULT_SETTINGS);
const [loading, setLoading] = React.useState(true);
useEffect(() => { loadSettings().then((s) => { setSettings(s); setLoading(false); }); }, []);
if (loading) return <ActivityIndicator />;
return (
<ScrollView style={[styles.container, settings.darkMode && styles.dark]}>
<SwitchRow label='Dark Mode' value={settings.darkMode}
onChange={(v) => updateSetting('darkMode', v)} />
<SwitchRow label='Notifications' value={settings.notificationsEnabled}
onChange={(v) => updateSetting('notificationsEnabled', v)} />
<FontSizeRow value={settings.fontSize}
onChange={(v) => updateSetting('fontSize', v)} />
<Button title='Reset to Defaults' onPress={handleReset} color='red' />
</ScrollView>
);
}Snabbkontroll
Testa dina kunskaper om koncepten inom React Native Mobile Development från den här lektionen.
Lektionssammanfattning
I den här lektionen har du lärt dig att läsa in vid montering med useEffect återställer inställningar från AsyncStorage innan skärmen renderas, att en enda hjälpfunktion, updateSetting, slår samman ändringar och skriver till AsyncStorage för alla inställningsnycklar, samt att dela inställningar via Context gör inställningar som mörkt läge tillgängliga i hela appen. Nästa steg är att utforska hur man rensar lagring och hanterar migreringsstrategier.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Bygga en beständig inställningsskärm” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Bygga en beständig inställningsskärm”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Bygga en beständig inställningsskärm”?
Skapa en inställningsskärm med växlare för aviseringar och mörkt läge, spara varje inställning i AsyncStorage och återställ inställningarna när appen startar. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”Bygga en beständig inställningsskärm”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Läsa och skriva med AsyncStorage
- Lagra och tolka JSON-objekt
- Bygga en beständig inställningsskärm
- Rensa lagring och migreringsstrategier