React Native Academy · Oppitunti

Suorittaminen laitteella ja emulaattorissa

Käynnistäkää sovellus fyysisellä laitteella Expo Golla ja emulaattorissa sekä opetelkaa lataamaan sovellus uudelleen ja tarkastelemaan muutoksia reaaliajassa.

Oppitunti 3/413 vaihetta

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 --web

Suorittaminen 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 Simulator

Suorittaminen 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 terminal

QR-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 --localhost

Fast 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 Emulator

USB-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 install

Uudelleenlataus 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! 🗂️

Aloita maksutta

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

  1. Noden, Expo CLI:n ja simulaattorien asentaminen
  2. Ensimmäisen Expo-projektin luominen
  3. Suorittaminen laitteella ja emulaattorissa
  4. Projektirakenteen ymmärtäminen
← Takaisin: React Native Academy