Suorittaminen laitteella ja emulaattorissa
Käynnistäkää sovellus fyysisellä laitteella Expo Golla ja emulaattorissa sekä opetelkaa lataamaan sovellus uudelleen ja tarkastelemaan muutoksia reaaliajassa.
Suorittaminen laitteella ja emulaattorissa on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Kehityspalvelimen käynnistäminen
Suorita sovellus siirtymällä sen kansioon ja suorittamalla npx expo start. Tämä käynnistää Metron ja näyttää QR-koodin. Pidä puhelin ja tietokone samassa Wi-Fi-verkossa, jotta ne voivat muodostaa yhteyden.
# 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 --webSuorittaminen iOS-simulaattorissa
Kun Metro on käynnissä, paina i käynnistääksesi iOS-simulaattorin. Ensimmäinen lataus asentaa Expo Gon ja kestää hetken, mutta sen jälkeen toiminta on nopeaa. Vain macOS:ssä, valitettavasti. 🍎
# 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 SimulatorSuorittaminen Android-emulaattorissa
Paina a avataksesi sovelluksesi Android-emulaattorissa. Luo ensin AVD Android Studiossa (tai anna Expon käynnistää se). Android toimii kaikissa käyttöjärjestelmissä — kätevää, jos sinulla ei ole Macia.
# 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 terminalQR-koodin skannaaminen oikealla laitteella
Suorittaaksesi sovelluksen oikeassa puhelimessa asenna Expo Go ja skannaa QR-koodi — iOS:ssä Kameralla ja Androidissa Expo Go -sovelluksella. Oikeat laitteet ovat tärkeitä: simulaattorit eivät pysty jäljittelemään sensoreita tai kosketusta täysin.
# 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: koodin päivittäminen heti
Fast Refresh siirtää tekemäsi muutokset käynnissä olevaan sovellukseen alle sekunnissa ja säilyttää tilan — arvoon 5 laskettu laskuri pysyy arvossa 5. Tila nollautuu vain, jos muutat rakennetta tai kohtaat virheen.
// 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>
);
}Kehittäjävalikko
Ravista laitettasi tai paina m avataksesi kehittäjävalikon. Sen kautta voit ladata sovelluksen uudelleen, ottaa Fast Refreshin käyttöön tai poistaa sen käytöstä, avata React DevToolsin tai seurata FPS-lukua ja muistinkäyttöä reaaliajassa.
// 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-virheenkorjaus Androidissa
Yhdistä Android-puhelin USB:n kautta saadaksesi nopeamman ja palomuurista riippumattoman yhteyden Wi-Fin sijaan. Ota kehittäjäasetukset ja USB-virheenkorjaus käyttöön, suorita adb devices vahvistaaksesi yhteyden ja paina sitten Metrossa a-näppäintä.
# 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 installUudelleenlataus ja Fast Refresh
Sovelluksen päivittämiseen on kaksi tapaa: Fast Refresh päivittää yhden moduulin ja säilyttää tilan, kun taas täysi uudelleenlataus (paina r) käynnistää kaiken uudelleen. Näetkö vanhentuneen käyttöliittymän? Kokeile ensin täyttä uudelleenlatausta.
// 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>
);
}Tunnelitila etäkehitykseen
Oletteko eri verkossa, esimerkiksi VPN:ssä tai rajoitetussa Wi-Fi-verkossa? Käytä tunnelitilaa lipulla --tunnel. Expo välittää yhteyden palvelimiensa kautta, joten sovelluksesi toimii kaikkialla — hieman hitaammin.
# 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)Expon kehityskoontiversiot
Tarvitsetko natiivimoduuleja, joita Expo Go ei sisällä? Luo kehityskoontiversio EAS:n avulla — kyseessä on mukautettu asiakasohjelma, joka sisältää natiiviriippuvuutesi. Yhdistä siihen sitten komennolla 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'
}
}
}Laitteen konsolilokien lukeminen
console.log-viestisi näkyvät Metron terminaalissa. Jos haluat tutkia asiaa tarkemmin, avaa JavaScript-virheenkorjain ravistamalla laitetta tai tarkastele komponenttipuuta React DevToolsin avulla.
// 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' }]);Pikatarkistus
Testaa, kuinka hyvin ymmärrät tämän oppitunnin React Native -mobiilikehityksen käsitteet.
Oppitunnin yhteenveto
Opit suorittamaan sovelluksesi: expo start käynnistää Metron ja QR-koodin, Fast Refresh päivittää käyttöliittymän reaaliajassa ja tunnelitila toimii eri verkkojen välillä. Seuraavaksi projektin rakenne! 🗂️
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Suorittaminen laitteella ja emulaattorissa” ilmainen?
Kyllä – oppitunnin ”Suorittaminen laitteella ja emulaattorissa” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko React Native Academy-kurssin, päivitä CoddyKit PROhon. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Suorittaminen laitteella ja emulaattorissa”?
Käynnistäkää sovellus fyysisellä laitteella Expo Golla ja emulaattorissa sekä opetelkaa lataamaan sovellus uudelleen ja tarkastelemaan muutoksia reaaliajassa. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Suorittaminen laitteella ja emulaattorissa”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Noden, Expo CLI:n ja simulaattorien asentaminen
- Ensimmäisen Expo-projektin luominen
- Suorittaminen laitteella ja emulaattorissa
- Projektirakenteen ymmärtäminen