Bygge en innstillingsskjerm med lagring
Opprett en innstillingsskjerm med brytere for varsler og mørk modus, lagre hver innstilling i AsyncStorage og gjenopprett preferansene når appen starter.
Bygge en innstillingsskjerm med lagring er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva et innstillingsskjermbilde med lagring gjør
Et innstillingsskjermbilde med lagring lar brukere konfigurere apppreferanser — som mørk modus, varslingsinnstillinger eller språk — og beholde disse innstillingene etter at appen startes på nytt. Innstillingene lagres i AsyncStorage når de endres, og lastes inn igjen ved oppstart. Dette er et av de vanligste mønstrene i enhver React Native-app i produksjon.
Definere tilstanden for innstillinger
Begynn med å definere et TypeScript-grensesnitt for innstillingsobjektet og en DEFAULT_SETTINGS-konstant som brukes når ingen lagrede innstillinger finnes (første oppstart). Når standardverdiene ligger i en konstant, blir det enkelt å bruke sikre reserveverdier og å referere til den opprinnelige formen i typevakter og migreringslogikk.
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';Laste inn innstillinger når skjermbildet monteres
I en useEffect med en tom avhengighetsmatrise leser De innstillingene fra AsyncStorage, parser JSON-en og legger resultatet i komponenttilstanden. Vis en ActivityIndicator mens innlastingen pågår, slik at brukeren ikke ser et kortvarig glimt av standardverdiene før de faktiske innstillingene vises.
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();
}, []);Lagre innstillinger når de endres
Opprett en hjelpefunksjon som slår sammen den nye innstillingen med det gjeldende innstillingsobjektet og skriver resultatet til AsyncStorage. Kall denne funksjonen fra endringsbehandleren til hver UI-kontroll, slik at innstillingene lagres umiddelbart etter hver brukerhandling. Det er ikke nødvendig med en separat «Lagre»-knapp på et innstillingsskjermbilde.
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));
}Gjengi bryteren for mørk modus
Bruk React Native-komponenten Switch for boolske innstillinger. Koble value-propen til tilstanden, og kall updateSetting i onValueChange. Brukergrensesnittet oppdateres umiddelbart via tilstanden, mens AsyncStorage lagrer i bakgrunnen. Resultatet føles responsivt uten at De må vente på at skrivingen skal bli ferdig.
<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>Gjengi en bryter for varsler
Legg til en ny Switch-rad for varslingsinnstillingen etter samme mønster. Når De gjenbruker den samme hjelpefunksjonen, updateSetting, holder De koden DRY — De trenger bare å endre nøkkelargumentet for å målrette en annen innstilling. Dette mønsteret kan skaleres til et hvilket som helst antall boolske innstillinger uten duplisert lagringslogikk.
<View style={styles.row}>
<Text style={styles.label}>Notifications</Text>
<Switch
value={settings.notificationsEnabled}
onValueChange={(value) => updateSetting('notificationsEnabled', value)}
/>
</View>Velge skriftstørrelse med Pressable-alternativer
For en enum-innstilling som skriftstørrelse gjengir De en rad med Pressable-knapper, én for hvert alternativ. Fremhev det valgte alternativet med en annen bakgrunnsfarge. Når brukeren trykker på en knapp, kalles updateSetting med den nye verdien. Dette gir en kompakt og tilgjengelig valgkontroll uten en fullstendig rullegardinliste.
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>Bruke innstillinger globalt med Context
For at mørk modus skal påvirke hele appen, må innstillingene deles globalt. Last inn innstillingene ved roten av appen (i App.tsx), og lagre dem i en SettingsContext. Alle skjermbilder som trenger det gjeldende temaet, kan lese det fra context i stedet for å laste inn fra AsyncStorage hver gang. Bare roten laster fra lagringen én gang ved oppstart.
// 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 for å tilbakestille til standardverdier
Legg til en «Tilbakestill til standardverdier»-knapp nederst på innstillingsskjermbildet. Når brukeren trykker på den, kaller den AsyncStorage.removeItem for å slette de lagrede innstillingene og tilbakestiller den lokale tilstanden til DEFAULT_SETTINGS. Bekreft handlingen med en Alert før tilbakestillingen gjennomføres, siden dette kan være en ødeleggende handling.
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);
},
},
]);
}Teste lagring på tvers av omstarter
For å bekrefte at innstillingene faktisk lagres, endrer De en innstilling, lukker appen helt (ikke bare sender den til bakgrunnen), åpner den igjen og kontrollerer at den endrede verdien vises. I Expo Go kan De teste dette ved å tvangsavslutte appen. I et utviklingsbygg kan De riste enheten for å åpne utviklermenyen og laste inn appen på nytt. Dette simulerer en ny oppstart samtidig som AsyncStorage-dataene beholdes.
Full struktur for innstillingsskjermbildet
Her er den fullstendige strukturen for et innstillingsskjermbilde som kombinerer alle mønstrene fra denne leksjonen. Skjermbildet laster inn innstillinger når det monteres, gjengir brytere og valgkontroller som kaller updateSetting, bruker stiler som tar hensyn til innstillingen for mørk modus, og inneholder en tilbakestillingsknapp nederst. Denne malen kan tilpasses appens spesifikke preferanser.
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>
);
}Kort kontroll
Test forståelsen Deres av konseptene innen React Native Mobile Development fra denne leksjonen.
Oppsummering av leksjonen
I denne leksjonen lærte De at innlasting ved montering med useEffect gjenoppretter innstillinger fra AsyncStorage før skjermbildet gjengis, at én updateSetting-hjelpefunksjon slår sammen endringer og skriver til AsyncStorage for enhver innstillingsnøkkel, og at deling av innstillinger via Context gjør preferanser som mørk modus tilgjengelige i hele appen. Neste tema er tømming av lagring og migreringsstrategier.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Bygge en innstillingsskjerm med lagring» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «Bygge en innstillingsskjerm med lagring», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Bygge en innstillingsskjerm med lagring»?
Opprett en innstillingsskjerm med brytere for varsler og mørk modus, lagre hver innstilling i AsyncStorage og gjenopprett preferansene når appen starter. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med React Native Academy?
Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.
Hvor lang tid tar leksjonen «Bygge en innstillingsskjerm med lagring»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?
Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Lese og skrive med AsyncStorage
- Lagre og analysere JSON-objekter
- Bygge en innstillingsskjerm med lagring
- Tømme lagring og migreringsstrategier