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.
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 --webKö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 SimulatorKö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 terminalSkanna 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 --localhostFast 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 EmulatorUSB-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 installOmladdning 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! 🗂️
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
- Installera Node, Expo CLI och simulatorer
- Skapa ert första Expo-projekt
- Köra på enhet och emulator
- Förstå projektstrukturen