PricingLoginStart free
React Native Academy · Lektion

Växlare, switchar och kryssrutor

Använd Switch-komponenten för att fånga booleska inställningar och bygg en anpassad kryssruta genom att växla tillståndet och uppdatera en formaterad View.

Lektion 3 av 413 steg

Växlare, switchar och kryssrutor ä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.

Switch-komponenten

React Natives inbyggda komponent Switch återger plattformens nativa växlingskontroll — en pillerformad reglageknapp på iOS och en Material Design-växlare på Android. Det är en kontrollerad komponent: du måste hantera dess state med useState och ange både egenskapen value (det aktuella booleska värdet) och callbacken onValueChange. Switch passar utmärkt för enkla på/av-inställningar, som att aktivera aviseringar, mörkt läge, platsåtkomst eller autosparande — överallt där ett binärt val behövs.

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' },
});

Utforma Switch

Komponenten Switch accepterar färgprops som anpassar dess utseende. trackColor tar emot ett objekt med nycklarna false och true för spårfärgen i respektive läge. thumbColor anger färgen på reglaget (använd en funktion baserad på det aktuella värdet för dynamisk färgsättning på Android). ios_backgroundColor anger spårfärgen när reglaget är avstängt i iOS (eftersom iOS ignorerar trackColor.false i vissa versioner). Med dessa props kan ni anpassa reglaget efter appens profilfärger i stället för att använda systemets standardblå färg.

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 inställningsskärm med flera växlingsknappar

En typisk inställningsskärm innehåller många växlingsknappar. Hantera varje inställning i en objektbaserad state-variabel och uppdatera enskilda fält med spread-mönstret. Rendera varje inställning i en formgiven rad med en Switch till höger. Separera avsnitt med visuella avgränsare eller avsnittsrubriker. Skicka det aktuella värdet och en uppdateringsfunktion till varje rad. När användaren ändrar en inställning uppdaterar ni state och kan även spara den i AsyncStorage inför nästa start.

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' },
});

Skapa en anpassad kryssruta

React Native innehåller ingen inbyggd kryssruta. Skapa en egen genom att hantera ett booleskt state och växla det vid tryck. Rendera en kvadratisk View med en kantlinje. När den är markerad fyller ni den med profilfärgen och visar en bock. Använd TouchableOpacity eller Pressable för att registrera trycket. Det här mönstret är flexibelt — ni kan anpassa kryssrutans stil efter valfritt designsystem, lägga till animationer eller stödja ett obestämt läge (ett minustecken för delvis markerade överordnade kryssrutor i ett träd).

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' },
});

Statehantering för kryssrutegrupper

För en grupp kryssrutor där användaren kan välja flera alternativ — till exempel aviseringstyper eller filter för en produktlista — hanterar ni valen som en Set eller array med valda ID:n i den överordnade komponenten. Skicka varje kryssruta dess markerade läge (baserat på om dess ID finns bland valen) och en callback för växling. Callbacken lägger till eller tar bort objektets ID i urvalsarrayen. Det här mönstret fungerar för valfritt antal kryssrutor utan duplicerad state-logik.

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 för radioknappsgrupper

En radioknappsgrupp låter användaren välja exakt ett alternativ ur en uppsättning. React Native har ingen inbyggd radioknapp, så implementera den som en variant av kryssrutegruppen med endast ett val. State består av ett enda värde (ID:t för det valda alternativet) i stället för ett Set. Varje alternativ renderas som en cirkulär kryssruta: när det är valt fylls cirkeln med profilfärgen. När användaren trycker på ett alternativ sätts state till det alternativets ID, vilket automatiskt avmarkerar alla andra. Inkludera accessibilityRole='radio' och accessibilityState={{ checked }} som stöd för skärmläsare.

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' },
});

Animerad växlingskomponent

Skapa en anpassad animerad växlingsknapp där ett reglage förflyttas med Animated.Value. Börja med värdet 0 (av) eller 1 (på) och animera det med Animated.timing när användaren trycker. Använd interpolate för att mappa det animerade värdet (0→1) till en horisontell förflyttning (0→knobTravel) för reglagets position och till en färgförändring för spåret. Det skapar en mjuk, profilerad växlingsknapp som exakt följer appens designsystem — utan de plattformsskillnader som finns i den inbyggda komponenten Switch.

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 },
});

Reglage för intervallvärden

Använd ett reglage för att välja ett numeriskt intervall, till exempel volym, ljusstyrka eller prisintervall. Community-paketet @react-native-community/slider tillhandahåller en plattformsoberoende reglagekomponent. Ange minimumValue, maximumValue och step. Callbacken onValueChange körs medan användaren drar, och onSlidingComplete körs när användaren släpper. Formge det ifyllda spåret med minimumTrackTintColor och det tomma spåret med maximumTrackTintColor. Visa det aktuella värdet i en Text-etikett ovanför eller bredvid reglaget.

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 },
});

Tillgänglighet för växlingsknappar

Gör växlingsknappar och reglage tillgängliga för användare av skärmläsare. Den inbyggda Switch är fullt tillgänglig direkt från början — VoiceOver läser upp dess etikett och aktuella läge. För anpassade kryssrutor och radioknappar anger ni accessibilityRole ('checkbox' eller 'radio') och accessibilityState={{ checked: value }}. För raden med växlingsknappen använder ni accessible={true} och accessibilityLabel på den omslutande tryckbara komponenten, så att hela raden (inklusive etiketten) läses upp som ett enda interaktivt objekt. Testa med VoiceOver (iOS) eller TalkBack (Android) innan ni släpper appen.

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önster för välj alla/inga

När ni arbetar med flera kryssrutor förbättrar en växlingsknapp för Välj alla användbarheten. Spåra valen i ett Set. Kryssrutan Välj alla har tre lägen: markerad (alla valda), omarkerad (inga valda) och obestämd (vissa valda). I React Native representerar ni det obestämda visuella läget med en streckikon i stället för en bock. När användaren trycker på Välj alla lägger ni antingen till alla objektens ID:n i Setet (om inte alla är valda) eller tömmer Setet (om alla är valda). Det här mönstret är vanligt i e-postklienter och filhanterare vid massåtgärder.

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 },
});

Spara växlingsknappens state i AsyncStorage

Användarinställningar som samlas in via växlingsknappar och reglage bör bevaras mellan appstarter. Spara varje inställning i AsyncStorage när den ändras och återställ alla inställningar från AsyncStorage när inställningsskärmen monteras. Använd en useEffect utan beroenden för att läsa in sparade inställningar vid montering och en separat useEffect med inställningsobjektet som beroende för att spara varje gång inställningarna ändras. Omslut läsningen med try/catch så att AsyncStorage-fel hanteras smidigt — om läsningen misslyckas använder appen tyst standardvärden.

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 };
}

Snabbtest

Testa er förståelse av koncepten inom React Native Mobile Development från den här lektionen.

Besvara frågan i den interaktiva lektionen

Sammanfattning av lektionen

I den här lektionen har ni lärt er att Switch är den inbyggda binära växlingsknappen som styrs av propsen value och onValueChange, att anpassade kryssrutor använder booleskt state och en kvadratisk View som villkorligt visar en bock, samt att radiogrupper hanterar en enda sträng med ID:t för det valda alternativet för att säkerställa ömsesidig uteslutning. Härnäst bygger vi ett komplett inloggningsformulär som kombinerar TextInput, växlingsknappar och validering.

Gratis att börja

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
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Växlare, switchar och kryssrutor” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Växlare, switchar och kryssrutor”, 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 ”Växlare, switchar och kryssrutor”?

Använd Switch-komponenten för att fånga booleska inställningar och bygg en anpassad kryssruta genom att växla tillståndet och uppdatera en formaterad View. 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 ”Växlare, switchar och kryssrutor”?

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

  1. Grunderna i TextInput och tangentbordstyper
  2. Tryckhantering med TouchableOpacity och Pressable
  3. Växlare, switchar och kryssrutor
  4. Bygga ett enkelt inloggningsformulär
← Tillbaka till React Native Academy