在设备与模拟器上运行

Starting the Development Server

# 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

Running on iOS Simulator

# 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

Running on Android Emulator

# 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

Scanning QR Code with a Real Device

# 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: Instant Code Updates

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

// 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 Debugging on Android

# 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

Reloading vs. Fast Refresh

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

# 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

# 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

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

Lesson Recap