Esecuzione su dispositivo ed emulatore
Avvii l’app su un dispositivo fisico con Expo Go e su un emulatore, quindi impari a ricaricare e ispezionare le modifiche in tempo reale.
Esecuzione su dispositivo ed emulatore è una lezione React Native Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Native Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Native Academy include 4 lezioni in totale.
Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.
Starting the Development Server
To run your app, go to its folder and run npx expo start. That launches Metro and shows a QR code. Keep your phone and computer on the same Wi-Fi for it to connect.
# 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 --webRunning on iOS Simulator
With Metro running, press i to launch the iOS Simulator. The first load installs Expo Go and takes a moment; after that it's fast. macOS only, sorry. 🍎
# 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 SimulatorRunning on Android Emulator
Press a to open your app on the Android Emulator. Create an AVD in Android Studio first (or let Expo boot one). Android runs on any OS — handy if you don't have a 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 terminalScanning QR Code with a Real Device
To run on a real phone, install Expo Go and scan the QR code — Camera on iOS, the Expo Go app on Android. Real devices matter: simulators can't fully fake sensors or touch.
# 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: Instant Code Updates
Fast Refresh pushes your edits to the running app in under a second and keeps your state — a counter at 5 stays at 5. It only resets when you change structure or hit an error.
// 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>
);
}The Developer Menu
Shake your device or press m to open the Developer Menu. From there you can reload, toggle Fast Refresh, open React DevTools, or watch FPS and memory live.
// 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 Debugging on Android
Connect an Android phone over USB for a faster, firewall-proof link than Wi-Fi. Enable Developer Options and USB Debugging, run adb devices to confirm, then press a in 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 installReloading vs. Fast Refresh
Two ways to update your app: Fast Refresh patches one module and keeps state, while a full reload (press r) restarts everything. Seeing a stale UI? Try a full reload first.
// 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 Mode for Remote Development
On a different network, like a VPN or locked-down Wi-Fi? Use tunnel mode with --tunnel. Expo routes through its servers so your app works anywhere — just a bit slower.
# 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
Need native modules Expo Go lacks? Make a development build with EAS — a custom client with your native dependencies. Then expo start --dev-client connects to it.
# 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'
}
}
}Reading Console Logs from Device
Your console.log messages show up in the Metro terminal. For deeper digging, shake the device to open the JS debugger, or use React DevTools to inspect the component tree.
// 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' }]);Quick Check
Test your understanding of React Native Mobile Development concepts from this lesson.
Lesson Recap
You learned to run your app: expo start launches Metro and a QR code, Fast Refresh updates the UI live, and tunnel mode works across networks. Next: project structure! 🗂️
Impara JavaScript con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Esecuzione su dispositivo ed emulatore» è gratuita?
Sì — il testo completo di «Esecuzione su dispositivo ed emulatore» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Native Academy, passa a CoddyKit PRO. Il corso React Native Academy include 4 lezioni in totale.
Cosa imparerò in «Esecuzione su dispositivo ed emulatore»?
Avvii l’app su un dispositivo fisico con Expo Go e su un emulatore, quindi impari a ricaricare e ispezionare le modifiche in tempo reale. Eserciti React Native Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Native Academy?
Non è richiesta alcuna esperienza precedente. React Native Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Esecuzione su dispositivo ed emulatore»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Native Academy?
Sì. Ogni lezione React Native Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Installazione di Node, Expo CLI e simulatori
- Creazione del primo progetto Expo
- Esecuzione su dispositivo ed emulatore
- Comprensione della struttura del progetto