PricingLoginStart free
React Native Academy · Lektion

Til/fra-knapper, switches og afkrydsningsfelter

Brug Switch-komponenten til at registrere booleske præferencer, og opbyg et brugerdefineret afkrydsningsfelt ved at skifte state og opdatere en typograferet View.

Lektion 3 af 413 trin

Til/fra-knapper, switches og afkrydsningsfelter er en gratis React Native Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i React Native Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Native Academy-kurset indeholder 4 lektioner i alt.

Switch-komponenten

React Natives indbyggede Switch-komponent gengiver platformens native omskifter — en pilleformet skyder på iOS og en Material Design-omskifter på Android. Den er en kontrolleret komponent: du skal administrere dens tilstand med useState og angive både proppen value (den aktuelle booleske værdi) og tilbagekaldet onValueChange. Switch er ideel til enkle til/fra-præferencer som aktivering af meddelelser, mørk tilstand, placeringsadgang eller automatisk lagring — alle steder, hvor der er brug for et binært valg.

import { Switch, View, Text, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function NotificationsToggle() {
  const [enabled, setEnabled] = useState(true);

  return (
    <View style={styles.row}>
      <Text style={styles.label}>Push Notifications</Text>
      <Switch
        value={enabled}
        onValueChange={setEnabled} // same as (val) => setEnabled(val)
      />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16, backgroundColor: '#fff', borderRadius: 12 },
  label: { fontSize: 16, color: '#333' },
});

Formatér Switch

Komponenten Switch accepterer farveegenskaber, så du kan tilpasse dens udseende. trackColor tager imod et objekt med nøglerne false og true til sporfarven i hver tilstand. thumbColor angiver farven på knappen (brug en funktion baseret på den aktuelle værdi for dynamisk farvelægning på Android). ios_backgroundColor angiver sporfarven, når kontakten er slået fra på iOS (fordi iOS i nogle versioner ignorerer trackColor.false). Med disse egenskaber kan du tilpasse kontakten til din apps brandfarver i stedet for at bruge systemets standardblå farve.

import { Switch, View, Text, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function BrandedSwitch() {
  const [active, setActive] = useState(false);

  return (
    <View style={styles.row}>
      <Text style={styles.label}>Dark Mode</Text>
      <Switch
        value={active}
        onValueChange={setActive}
        trackColor={{ false: '#e0e0e0', true: '#4f86f7' }}
        thumbColor={active ? '#fff' : '#f0f0f0'}
        ios_backgroundColor='#e0e0e0'
      />
    </View>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16 },
  label: { fontSize: 16 },
});

En indstillingsskærm med flere kontakter

En typisk indstillingsskærm har mange til/fra-kontakter. Administrer hver indstilling i en objektbaseret tilstandsvariabel, og opdater individuelle felter ved hjælp af spread-mønstret. Vis hver indstilling i en formateret række med en Switch til højre. Adskil sektioner med visuelle skillelinjer eller sektionsoverskrifter. Giv hver række den aktuelle værdi og en opdateringsfunktion. Når brugeren ændrer en indstilling, skal du opdatere tilstanden og eventuelt gemme den i AsyncStorage til næste opstart.

import { Switch, View, Text, StyleSheet, ScrollView } from 'react-native';
import { useState } from 'react';

export default function SettingsScreen() {
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
    autoPlay: true,
    locationAccess: false,
  });

  function toggle(key) {
    setSettings(prev => ({ ...prev, [key]: !prev[key] }));
  }

  const rows = [
    { key: 'notifications', label: 'Push Notifications' },
    { key: 'darkMode', label: 'Dark Mode' },
    { key: 'autoPlay', label: 'Auto-Play Videos' },
    { key: 'locationAccess', label: 'Location Access' },
  ];

  return (
    <ScrollView style={styles.screen}>
      <View style={styles.section}>
        {rows.map(({ key, label }) => (
          <View key={key} style={styles.row}>
            <Text style={styles.label}>{label}</Text>
            <Switch value={settings[key]} onValueChange={() => toggle(key)} trackColor={{ false: '#e0e0e0', true: '#4f86f7' }} />
          </View>
        ))}
      </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, backgroundColor: '#f5f5f5' },
  section: { margin: 16, backgroundColor: '#fff', borderRadius: 12, overflow: 'hidden' },
  row: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14, borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#eee' },
  label: { fontSize: 16, color: '#333' },
});

Oprettelse af en tilpasset afkrydsningsboks

React Native indeholder ikke en indbygget afkrydsningsboks. Opret en tilpasset afkrydsningsboks ved at administrere en boolesk tilstand og skifte den ved tryk. Vis en firkantet View med en kant; når den er markeret, skal du udfylde den med brandfarven og vise et flueben. Brug TouchableOpacity eller Pressable til at registrere trykket. Dette mønster er fleksibelt — du kan tilpasse det til ethvert designsystems stil for afkrydsningsbokse, tilføje animationer eller understøtte en ubestemt tilstand (en minusstreg for delvist valgte overordnede afkrydsningsbokse i et træ).

import { TouchableOpacity, View, Text, StyleSheet } from 'react-native';

export default function Checkbox({ label, value, onChange }) {
  return (
    <TouchableOpacity
      style={styles.row}
      onPress={() => onChange(!value)}
      activeOpacity={0.8}
      accessibilityRole='checkbox'
      accessibilityState={{ checked: value }}
    >
      <View style={[styles.box, value && styles.checked]}>
        {value && <Text style={styles.check}>✓</Text>}
      </View>
      <Text style={styles.label}>{label}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 8 },
  box: { width: 24, height: 24, borderRadius: 6, borderWidth: 2, borderColor: '#ccc', alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' },
  checked: { backgroundColor: '#4f86f7', borderColor: '#4f86f7' },
  check: { color: '#fff', fontSize: 14, fontWeight: 'bold' },
  label: { fontSize: 16, color: '#333' },
});

Administration af tilstand for en gruppe af afkrydsningsbokse

For en gruppe af afkrydsningsbokse, hvor brugerne kan vælge flere indstillinger — f.eks. valg af meddelelsestyper eller filtrering af en produktliste — skal du administrere valgene som et Set eller et array med valgte ID'er i den overordnede komponent. Giv hver afkrydsningsboks dens markerede tilstand (baseret på, om dens ID findes blandt valgene) samt en tilbagekaldsfunktion til at skifte tilstanden. Tilbagekaldsfunktionen tilføjer eller fjerner elementets ID fra valgsarrayet. Dette mønster kan skaleres til et vilkårligt antal afkrydsningsbokse uden at duplikere tilstandslogik.

import { View, Text } from 'react-native';
import { useState } from 'react';
import Checkbox from './Checkbox';

const OPTIONS = [
  { id: 'promotions', label: 'Promotions and deals' },
  { id: 'news', label: 'App news and updates' },
  { id: 'messages', label: 'New messages' },
  { id: 'reminders', label: 'Reminders' },
];

export default function NotificationPrefs() {
  const [selected, setSelected] = useState(new Set(['messages']));

  function toggle(id) {
    setSelected(prev => {
      const next = new Set(prev);
      next.has(id) ? next.delete(id) : next.add(id);
      return next;
    });
  }

  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 12 }}>Notify me about:</Text>
      {OPTIONS.map(opt => (
        <Checkbox
          key={opt.id}
          label={opt.label}
          value={selected.has(opt.id)}
          onChange={() => toggle(opt.id)}
        />
      ))}
      <Text style={{ marginTop: 16, color: '#666' }}>{selected.size} selected</Text>
    </View>
  );
}

Mønster for grupper af alternativknapper

En gruppe af alternativknapper lader brugerne vælge præcis én indstilling fra et sæt. React Native har ingen indbygget alternativknap, så implementer den som en variant af gruppen af afkrydsningsbokse med enkeltvalg. Tilstanden er en enkelt værdi (ID'et for den valgte indstilling) i stedet for et Set. Hver indstilling vises som en cirkulær afkrydsningsboks; når den er valgt, udfyldes cirklen med brandfarven. Når der trykkes på en indstilling, sættes tilstanden til dens ID, så alle andre automatisk fravælges. Inkluder accessibilityRole='radio' og accessibilityState={{ checked }} for understøttelse af skærmlæsere.

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

const PLANS = ['Free', 'Pro', 'Enterprise'];

export default function PlanSelector() {
  const [selected, setSelected] = useState('Free');

  return (
    <View style={{ padding: 16, gap: 8 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 8 }}>Choose a plan</Text>
      {PLANS.map(plan => (
        <TouchableOpacity
          key={plan}
          style={styles.option}
          onPress={() => setSelected(plan)}
          accessibilityRole='radio'
          accessibilityState={{ checked: selected === plan }}
        >
          <View style={[styles.radio, selected === plan && styles.radioSelected]}>
            {selected === plan && <View style={styles.dot} />}
          </View>
          <Text style={styles.planLabel}>{plan}</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  option: { flexDirection: 'row', alignItems: 'center', gap: 12, padding: 14, backgroundColor: '#fff', borderRadius: 10, borderWidth: 1.5, borderColor: '#eee' },
  radio: { width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: '#ccc', alignItems: 'center', justifyContent: 'center' },
  radioSelected: { borderColor: '#4f86f7' },
  dot: { width: 10, height: 10, borderRadius: 5, backgroundColor: '#4f86f7' },
  planLabel: { fontSize: 16, color: '#333', fontWeight: '500' },
});

Animeret til/fra-komponent

Opret en tilpasset animeret til/fra-kontakt, der lader en knap glide ved hjælp af Animated.Value. Start med værdien 0 (slået fra) eller 1 (slået til), og animer den med Animated.timing, når brugeren trykker. Brug interpolate til at knytte den animerede værdi (0→1) til en vandret forskydning (0→knobTravel) for knappens placering og til et farveskift for sporet. Det skaber en jævn, brandtilpasset kontakt, der passer præcist til din apps designsystem — uden de platformsspecifikke uoverensstemmelser i den indbyggede Switch-komponent.

import { Animated, TouchableOpacity, StyleSheet } from 'react-native';
import { useRef, useState } from 'react';

export default function AnimatedToggle({ value, onChange }) {
  const anim = useRef(new Animated.Value(value ? 1 : 0)).current;

  function toggle() {
    const next = !value;
    Animated.timing(anim, { toValue: next ? 1 : 0, duration: 180, useNativeDriver: false }).start();
    onChange(next);
  }

  const trackColor = anim.interpolate({ inputRange: [0, 1], outputRange: ['#e0e0e0', '#4f86f7'] });
  const knobX = anim.interpolate({ inputRange: [0, 1], outputRange: [2, 22] });

  return (
    <TouchableOpacity onPress={toggle} activeOpacity={1}>
      <Animated.View style={[styles.track, { backgroundColor: trackColor }]}>
        <Animated.View style={[styles.knob, { transform: [{ translateX: knobX }] }]} />
      </Animated.View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  track: { width: 52, height: 30, borderRadius: 15, justifyContent: 'center' },
  knob: { width: 26, height: 26, borderRadius: 13, backgroundColor: '#fff', shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.25, shadowRadius: 2, elevation: 2 },
});

Skydeknap til intervalværdier

Til valg af et numerisk interval (lydstyrke, lysstyrke eller prisinterval) skal du bruge en skydeknap. Community-pakken @react-native-community/slider leverer en skydeknapkomponent på tværs af platforme. Angiv minimumValue, maximumValue og step. Tilbagekaldsfunktionen onValueChange udløses, mens brugeren trækker, og onSlidingComplete udløses, når brugeren slipper. Formatér det udfyldte spor med minimumTrackTintColor og det tomme spor med maximumTrackTintColor. Vis den aktuelle værdi i en Text-etiket over eller ved siden af skydeknappen.

import Slider from '@react-native-community/slider';
// npx expo install @react-native-community/slider
import { View, Text, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function VolumeControl() {
  const [volume, setVolume] = useState(50);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Volume: {Math.round(volume)}%</Text>
      <Slider
        minimumValue={0}
        maximumValue={100}
        step={1}
        value={volume}
        onValueChange={setVolume}
        minimumTrackTintColor='#4f86f7'
        maximumTrackTintColor='#ddd'
        thumbTintColor='#4f86f7'
        style={styles.slider}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { padding: 24 },
  label: { fontSize: 18, fontWeight: '600', marginBottom: 8 },
  slider: { width: '100%', height: 40 },
});

Tilgængelighed for til/fra-kontakter

Gør til/fra-kontakter og kontakter tilgængelige for brugere af skærmlæsere. Den indbyggede Switch er fuldt tilgængelig fra start — VoiceOver læser dens etiket og aktuelle tilstand op. For tilpassede afkrydsningsbokse og alternativknapper skal du angive accessibilityRole ('checkbox' eller 'radio') og accessibilityState={{ checked: value }}. For rækken med til/fra-kontakten skal du bruge accessible={true} og accessibilityLabel på den omsluttende trykbare komponent, så hele rækken (inklusive etiketten) annonceres som ét element, der kan aktiveres. Test med VoiceOver (iOS) eller TalkBack (Android), før du udgiver.

import { Switch, View, Text } from 'react-native';

export default function AccessibleSettingRow({ label, value, onChange, description }) {
  return (
    // The whole row is accessible: tapping anywhere toggles
    <View
      accessible
      accessibilityLabel={label}
      accessibilityHint={description}
      accessibilityRole='switch'
      accessibilityState={{ checked: value }}
      style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16 }}
    >
      <View style={{ flex: 1 }}>
        <Text style={{ fontSize: 16, color: '#333' }}>{label}</Text>
        {description && <Text style={{ fontSize: 13, color: '#999' }}>{description}</Text>}
      </View>
      <Switch
        value={value}
        onValueChange={onChange}
        importantForAccessibility='no-hide-descendants' // prevent double announcement
      />
    </View>
  );
}

Mønsteret Vælg alle / ingen

Når du arbejder med flere afkrydsningsbokse, forbedrer en Vælg alle-kontakt brugervenligheden. Spor valgene i et Set. Afkrydsningsboksen Vælg alle har tre tilstande: markeret (alle er valgt), ikke markeret (ingen er valgt) og ubestemt (nogle er valgt). I React Native repræsenterer du den ubestemte visuelle tilstand med et stregikon i stedet for et flueben. Når brugeren trykker på Vælg alle, skal du enten tilføje alle elementernes ID'er til Set'et (hvis ikke alle er valgt) eller rydde Set'et (hvis alle er valgt). Dette mønster er almindeligt i e-mailklienter og filhåndteringsprogrammer til massehandlinger.

import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

const ITEMS = ['Alpha', 'Beta', 'Gamma', 'Delta'];

export default function SelectAll() {
  const [selected, setSelected] = useState(new Set());

  const allSelected = selected.size === ITEMS.length;
  const someSelected = selected.size > 0 && !allSelected;

  function toggleAll() {
    setSelected(allSelected ? new Set() : new Set(ITEMS));
  }

  function toggleItem(item) {
    setSelected(prev => {
      const next = new Set(prev);
      next.has(item) ? next.delete(item) : next.add(item);
      return next;
    });
  }

  return (
    <View style={{ padding: 16 }}>
      <TouchableOpacity style={styles.header} onPress={toggleAll}>
        <View style={[styles.box, (allSelected || someSelected) && styles.checked]}>
          <Text style={styles.check}>{someSelected ? '−' : allSelected ? '✓' : ''}</Text>
        </View>
        <Text style={{ fontWeight: 'bold', fontSize: 16 }}>Select All</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingVertical: 12 },
  box: { width: 24, height: 24, borderRadius: 6, borderWidth: 2, borderColor: '#ccc', alignItems: 'center', justifyContent: 'center' },
  checked: { backgroundColor: '#4f86f7', borderColor: '#4f86f7' },
  check: { color: '#fff', fontWeight: 'bold', fontSize: 14 },
});

Lagring af til/fra-tilstand i AsyncStorage

Brugerindstillinger, der registreres af til/fra-kontakter, bør bevares efter genstart af appen. Gem hver indstilling i AsyncStorage, hver gang den ændres, og gendan alle indstillinger fra AsyncStorage, når indstillingsskærmen monteres. Brug en useEffect uden afhængigheder til at indlæse gemte indstillinger ved montering og en separat useEffect med indstillingsobjektet som afhængighed til at gemme, hver gang indstillingerne ændres. Omslut læsningen i try/catch for at håndtere AsyncStorage-fejl på en robust måde — hvis læsningen mislykkes, bruger appen standardværdier uden at vise en fejl.

import AsyncStorage from '@react-native-async-storage/async-storage';
import { useState, useEffect } from 'react';

const SETTINGS_KEY = '@user_settings';

const DEFAULT_SETTINGS = {
  notifications: true,
  darkMode: false,
  autoPlay: true,
};

export function usePersistedSettings() {
  const [settings, setSettings] = useState(DEFAULT_SETTINGS);

  // Load on mount
  useEffect(() => {
    AsyncStorage.getItem(SETTINGS_KEY)
      .then(stored => {
        if (stored) setSettings(JSON.parse(stored));
      })
      .catch(() => {}); // use defaults on error
  }, []);

  // Persist whenever settings change
  useEffect(() => {
    AsyncStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
  }, [settings]);

  function toggle(key) {
    setSettings(prev => ({ ...prev, [key]: !prev[key] }));
  }

  return { settings, toggle };
}

Hurtigt tjek

Test din forståelse af begreberne inden for mobiludvikling med React Native fra denne lektion.

Besvar den i den interaktive lektion

Opsummering af lektionen

I denne lektion lærte du, at Switch er den indbyggede binære til/fra-kontakt, der styres af egenskaberne value og onValueChange, at tilpassede afkrydsningsbokse bruger boolesk tilstand og en firkantet View, der viser et flueben efter behov, og at alternativknapgrupper administrerer en streng med ét valgt ID for at sikre gensidig udelukkelse. Dernæst opbygger vi en komplet loginformular, der kombinerer TextInput, til/fra-kontakter og validering.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Til/fra-knapper, switches og afkrydsningsfelter” gratis?

Ja — alle 3 lektioner i læringssporet React Native Academy, inklusive “Til/fra-knapper, switches og afkrydsningsfelter”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. React Native Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Til/fra-knapper, switches og afkrydsningsfelter”?

Brug Switch-komponenten til at registrere booleske præferencer, og opbyg et brugerdefineret afkrydsningsfelt ved at skifte state og opdatere en typograferet View. Du øver dig i React Native Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på React Native Academy?

Der kræves ingen tidligere erfaring. React Native Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Til/fra-knapper, switches og afkrydsningsfelter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne React Native Academy-lektion?

Ja. Alle React Native Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Grundlæggende TextInput og tastaturtyper
  2. Trykhåndtering med TouchableOpacity og Pressable
  3. Til/fra-knapper, switches og afkrydsningsfelter
  4. Opbygning af en enkel loginformular
← Tilbage til React Native Academy