React Native Academy · Lektion

Köra på enhet och emulator

Starta appen på en fysisk enhet med Expo Go och i en emulator, och lär er sedan att läsa in appen på nytt och granska ändringar i realtid.

Lektion 3 av 413 steg

Köra på enhet och emulator är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig 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.

Starta utvecklingsservern

För att köra appen går du till dess mapp och kör npx expo start. Då startas Metro och en QR-kod visas. Se till att telefonen och datorn är anslutna till samma Wi-Fi så att de kan ansluta till varandra.

# Start the Expo development server
cd MyFirstApp
npx expo start

# Force iOS Simulator directly
npx expo start --ios

# Force Android Emulator directly
npx expo start --android

# Start in web browser mode
npx expo start --web

Köra appen i iOS Simulator

När Metro körs trycker du på i för att starta iOS Simulator. Den första starten installerar Expo Go och tar en stund; därefter går det snabbt. Endast macOS, tyvärr. 🍎

# With Metro running, press 'i' in the terminal
# Or launch a specific simulator:
xcrun simctl boot 'iPhone 15 Pro'

# List available devices
xcrun simctl list devices

# Open the Simulator app
open -a Simulator

Köra appen i Android Emulator

Tryck på a för att öppna appen i Android Emulator. Skapa först en AVD i Android Studio (eller låt Expo starta en). Android fungerar på alla operativsystem – praktiskt om du inte har en Mac.

# List available Android Virtual Devices
emulator -list-avds

# Start a specific AVD
emulator -avd Pixel_7_API_34

# Verify the device is visible to adb
adb devices
# Output: List of devices attached
# emulator-5554  device

# Then press 'a' in Metro terminal

Skanna QR-koden med en riktig enhet

Om du vill köra appen på en riktig telefon installerar du Expo Go och skannar QR-koden – med Kamera på iOS och med Expo Go-appen på Android. Riktiga enheter är viktiga: simulatorer kan inte helt efterlikna sensorer eller beröring.

# Ensure Metro is running
npx expo start

# If QR scan doesn't work (firewall/VPN), use tunnel mode:
npx expo start --tunnel
# This routes traffic through Expo's servers,
# useful when local network is blocked.

# Or connect via USB and use:
npx expo start --localhost

Fast Refresh: omedelbara koduppdateringar

Fast Refresh skickar dina ändringar till den körande appen på under en sekund och behåller tillståndet – en räknare på 5 förblir 5. Tillståndet återställs bara när du ändrar strukturen eller får ett fel.

// When you save this file, the app updates instantly
import { useState } from 'react';
import { Text, View, TouchableOpacity } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <View>
      {/* Change 'blue' to 'red' and save — count stays at its current value */}
      <Text style={{ color: 'blue', fontSize: 40 }}>{count}</Text>
      <TouchableOpacity onPress={() => setCount(c => c + 1)}>
        <Text>Increment</Text>
      </TouchableOpacity>
    </View>
  );
}

Utvecklarmenyn

Skaka enheten eller tryck på m för att öppna Developer Menu. Därifrån kan du läsa in appen igen, aktivera eller inaktivera Fast Refresh, öppna React DevTools eller övervaka FPS och minne i realtid.

// You can programmatically open the dev menu
// (useful for testing)
import { DevMenu } from 'expo-dev-client';

// In a dev build:
DevMenu.openMenu();

// Keyboard shortcuts in Metro terminal:
// r → Reload app
// m → Open developer menu
// j → Open React DevTools
// i → Open iOS Simulator
// a → Open Android Emulator

USB-felsökning på Android

Anslut en Android-telefon via USB för en snabbare anslutning som inte påverkas av brandväggar, i stället för Wi-Fi. Aktivera Developer Options och USB Debugging, kör adb devices för att bekräfta anslutningen och tryck sedan på a i Metro.

# 1. Enable Developer Options on Android:
# Settings → About Phone → Build number (tap 7 times)
# Settings → Developer Options → USB Debugging ON

# 2. Connect phone via USB and verify:
adb devices
# List of devices attached
# R5CT109XXXXX  device

# 3. Forward Metro port to the device
adb reverse tcp:8081 tcp:8081

# 4. Press 'a' in Metro to build and install

Omladdning jämfört med Fast Refresh

Det finns två sätt att uppdatera appen: Fast Refresh uppdaterar en modul och behåller tillståndet, medan en fullständig omladdning (tryck på r) startar om allt. Ser UI:t inaktuellt ut? Prova först en fullständig omladdning.

// Scenarios where full reload is needed:
// 1. You changed a global constant
// 2. You updated app.json
// 3. You added/removed a Context Provider
// 4. You installed a new native module

// Force reload programmatically (dev only)
import { DevSettings } from 'react-native';

function DebugReloadButton() {
  if (!__DEV__) return null;
  return (
    <TouchableOpacity onPress={() => DevSettings.reload()}>
      <Text>Reload App</Text>
    </TouchableOpacity>
  );
}

Tunnel-läge för fjärrutveckling

Använder du ett annat nätverk, till exempel ett VPN eller ett begränsat Wi-Fi? Använd tunnel mode med --tunnel. Expo skickar trafiken via sina servrar så att appen fungerar var som helst – men det går lite långsammare.

# Start in tunnel mode (works across networks)
npx expo start --tunnel

# Expo will print a URL like:
# https://u.expo.dev/your-project-id?channel-name=...

# Or switch modes interactively in Metro:
# Press 's' to switch between:
#   LAN (local Wi-Fi, fastest)
#   Tunnel (public URL, works anywhere)
#   localhost (USB/same machine only)

Expo Development Builds

Behöver du native-moduler som Expo Go saknar? Skapa en development build med EAS – en anpassad klient med dina native-beroenden. Anslut sedan till den med expo start --dev-client.

# Create a development build with EAS
npx eas build --profile development --platform ios
npx eas build --profile development --platform android

# After installing the dev build on device:
npx expo start --dev-client

# eas.json configuration for dev build:
{
  'build': {
    'development': {
      'developmentClient': true,
      'distribution': 'internal'
    }
  }
}

Läsa konsolloggar från enheten

Dina meddelanden från console.log visas i Metro-terminalen. Om du vill undersöka mer kan du skaka enheten för att öppna JS-felsökaren eller använda React DevTools för att granska komponentträdet.

// console.log appears in Metro terminal
console.log('Hello from React Native!');
console.warn('This shows a yellow warning box');
console.error('This shows a red error box');

// Structured logging for objects
const user = { name: 'Alice', age: 30 };
console.log('User data:', JSON.stringify(user, null, 2));

// Use console.table for arrays
console.table([{ id: 1, name: 'Item A' }, { id: 2, name: 'Item B' }]);

Snabbtest

Testa dina kunskaper om React Native Mobile Development-koncepten från den här lektionen.

Sammanfattning av lektionen

Du har lärt dig att köra appen: expo start startar Metro och visar en QR-kod, Fast Refresh uppdaterar UI:t direkt och tunnel-läge fungerar över olika nätverk. Nästa steg: projektstruktur! 🗂️

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

Vanliga frågor

Är lektionen ”Köra på enhet och emulator” gratis?

Ja – hela texten till ”Köra på enhet och emulator” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Native Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Native Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Köra på enhet och emulator”?

Starta appen på en fysisk enhet med Expo Go och i en emulator, och lär er sedan att läsa in appen på nytt och granska ändringar i realtid. 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 ”Köra på enhet och emulator”?

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. Installera Node, Expo CLI och simulatorer
  2. Skapa ert första Expo-projekt
  3. Köra på enhet och emulator
  4. Förstå projektstrukturen
← Tillbaka till React Native Academy