Encodera

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.

Оглавление

Запуск на телефоне, эмуляторе и в браузере

Код приложения собирает и раздаёт сервер разработки Metro. Телефон, эмулятор или браузер подключаются к нему и показывают приложение, а после сохранения файла экран обновляется сам.

Сервер разработки

Из папки проекта выполните:

npx expo start

В терминале появится QR-код, адрес http://localhost:8081 и список горячих клавиш. Сервер должен работать всё время, пока вы пишете код; остановить его можно сочетанием Ctrl+C.

На телефоне через Expo Go

  1. Подключите компьютер и телефон к одной сети Wi-Fi.
  2. На Android откройте Expo Go и нажмите «Scan QR code».
  3. На iPhone наведите на QR-код обычную камеру и нажмите на появившуюся ссылку.

Через несколько секунд на телефоне появится экран с надписью из app/index.tsx. Если телефон не может подключиться (например, в офисной сети), запустите сервер через туннель:

npx expo start --tunnel

В эмуляторе и симуляторе

Эмулятор — программа, изображающая телефон на компьютере.

ПлатформаЧто нужноКлавиша в терминале
AndroidAndroid Studio и созданный в нём виртуальный телефонa
iOSMac с установленным Xcodei
ВебБраузерw

Нажмите клавишу в окне терминала, где работает npx expo start. Expo сам установит Expo Go в эмулятор и откроет проект. iOS-симулятор работает только на macOS; на Windows и Linux для iPhone используйте настоящий телефон.

В браузере

Клавиша w открывает приложение по адресу http://localhost:8081. React Native for Web превращает View и Text в HTML-элементы, поэтому веб-версия удобна для быстрой проверки вёрстки. Но камера, вибрация и часть модулей в браузере недоступны — окончательно проверяйте приложение на телефоне.

Обновление экрана

Измените текст в app/index.tsx и сохраните файл:

// app/index.tsx
import { Text, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Мои задачи</Text>
    </View>
  );
}

Через секунду телефон покажет «Мои задачи» без перезапуска — это Fast Refresh. Значения useState при этом обычно сохраняются.

Полезные клавиши

КлавишаДействие
rПерезагрузить приложение
mОткрыть меню разработчика
jОткрыть отладчик
?Показать все команды

Частая ошибка

Телефон и компьютер в разных сетях — например, телефон в мобильном интернете, а компьютер в Wi-Fi. Expo Go тогда бесконечно загружается или пишет, что не может подключиться. Переключите телефон на ту же сеть Wi-Fi или используйте npx expo start --tunnel.

Спасибо, что читаете!

Пожертвуйте сайту, мы стараемся ради вас.