Руководство для начинающих по использованию Expo с реагированием на развитие коренных народов

Установка Expo CLI

Expo CLI - это инструмент командной строки, который вы используете для создания, запуска и создания приложений. Установите его глобально через npm:

npm install -g expo-cli

Если вы используете Yarn, вы можете запустить вместо этого. Проверьте установку . Обратите внимание, что по состоянию на 2024 год Expo переходит на в качестве стартера по умолчанию. пока работает, мы рекомендуем использовать более новый метод:

npx create-expo-app MyFirstApp --template blank

Это создает минимальный проект с последней версией Expo SDK и встроенной поддержкой TypeScript при желании.

Изучение структуры проекта

Once your project is created, open it in your editor. Key files and directories:

• App.js (или App.tsx) — точка входа вашего приложения. Всё, что вы визуализируете, начинается здесь.
• package.json — список зависимостей (реагировать, реагировать-нативный, expo, и любые модули Expo, которые вы устанавливаете).
• app.json — конфигурационный файл для вашего проекта Expo (имя приложения, значок, экран брызг, разрешения и т.д.).
• node modules — содержит все установленные пакеты.
• .expo — местное государство для Expo, не обязуйтесь осуществлять контроль версий.

Прелесть Expo в том, что вы не увидите папки Android/ios/, если не запустите их позже. Все управляется через Expo SDK.

Запуск вашего приложения в первый раз

Перейдите в каталог вашего проекта:

cd MyFirstApp

Запустите сервер разработки:

npx expo start

QR-код появляется в терминале (или веб-страница открывается с QR-кодом).Важно: На iOS используйте приложение Camera по умолчанию; на Android используйте приложение Expo Go для сканирования. Приложение будет загружаться на ваше устройство, и любые изменения, которые вы сохраните в редакторе кода, будут немедленно отражаться (горячая перезагрузка). Вы также можете использовать эмулятор Android/iOS на вашем компьютере, если они настроены.

Устранение общих проблем с началом

• Проблемы с подключением : Убедитесь, что ваш телефон и компьютер находятся в одной сети Wi-Fi. Если это не удается, используйте режим , нажав в терминале Expo CLI. Это работает даже в разных сетях.
• Приложение Expo Go показывает «Невозможность найти приложение»: Обычно это означает, что сервер не полностью запущен. Ждите, пока журналы скажут «Metro bundler готов».
• Бундлер застрял: Удалите папку и попробуйте очистить кэш.

Создание первого экрана: практический пример

Давайте создадим простой экран с кнопкой, которая показывает предупреждение. Замените содержимое :

import React from 'react';
import { View, Text, Button, Alert, StyleSheet } from 'react-native';

export default function App() {
 const showAlert = () => {
 Alert.alert('Hello!', 'You clicked the button.');
 };

 return (
 <View style={styles.container}>
 <Text style={styles.title}>Welcome to Expo!</Text>
 <Button title="Click Me" onPress={showAlert} />
 </View>
 );
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#f0f0f0',
 },
 title: {
 fontSize: 24,
 marginBottom: 20,
 },
});

Сохраните файл. Ваше устройство должно мгновенно показывать экран. Нажатие кнопки вызывает нативное оповещение. Обратите внимание, что вы не написали код Java/Kotlin или Swift — Expo обработала мостинг.

Навигация с помощью Expo Router

Большинство приложений имеют несколько экранов. Expo Router является рекомендуемой навигационной библиотекой, поскольку он использует маршрутизацию на основе файлов (аналогично Next.js). Он поддерживает глубокие ссылки, вкладки, стеки и модали прямо из коробки.

Установить Expo Router

npx expo install expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants

Затем настройте свою точку входа , чтобы установить точку входа . Создайте каталог в корне вашего проекта. Внутри него создайте для домашнего экрана и для второго экрана. Структура файла:

app/
 index.js
 about.js
 _layout.js (optional, for shared layout)

[[23]]:

import { Link } from 'expo-router';
import { View, Text } from 'react-native';

export default function Home() {
 return (
 <View>
 <Text>Home Screen</Text>
 <Link href="/about">Go to About</Link>
 </View>
 );
}

Когда пользователь нажимает на ссылку, приложение переходит на без какой-либо конфигурации. Этот шаблон масштабируется до сотен экранов и намного проще, чем традиционные настройки React Navigation.

Доступ к функциям устройств с помощью Expo SDK

Экспо предоставляет более 50 модулей для функциональности устройства.

Камера

npx expo install expo-camera

Вы можете запрашивать разрешения, делать фотографии и записывать видео.

import { Camera } from 'expo-camera';
// ... request permission with Camera.requestCameraPermissionsAsync()

Местоположение

npx expo install expo-location

Получите текущее положение пользователя, изменения местоположения или адреса геокодов.

Уведомления

npx expo install expo-notifications

Расписание и обработка локальных и push-уведомлений. Expo даже предоставляет услугу push-уведомлений, поэтому вам не нужен пользовательский бэкэнд для отправки токенов.

Файловая система

npx expo install expo-file-system

Чтение, запись и управление файлами на устройстве. Полезно для кэширования изображений или загрузки контента.

Поскольку эти модули уже связаны в управляемом рабочем процессе Expo, вы можете начать использовать их сразу после установки пакета npm.

Отладка и проверка вашего приложения

Отладка проста в Expo. При запуске , пульт Metro предоставляет меню разработчика. На вашем устройстве встряхните его (или используйте меню отладки на экране на Android) для доступа к опциям:

• Перезагрузить — перезагрузить пакет JavaScript.
• Открытый инспектор — открывает React DevTools в браузере для инспектора компонентов.
• Toggle Remote JS Debugging — позволяет отлаживать в Chrome DevTools (можно устанавливать точки останова в JavaScript).
• Show Element Inspector — нажмите на элементы пользовательского интерфейса, чтобы увидеть их реквизит и стили.

Для сетевых запросов можно использовать такие инструменты, как React Native Debugger или встроенный сетевой инспектор в Chrome DevTools при включенной удаленной отладке.Кроме того, журналы Expo появляются в терминале, где вы запускали сервер, показывая следы стека и выход консоли.log.

Использование Flipper с Expo

Если вы предпочитаете отладчик Flipper от Facebook, вы можете настроить голый рабочий процесс Expo для его поддержки, но для управляемого рабочего процесса встроенных инструментов обычно достаточно. Многие разработчики полагаются на собственные журналы разработчиков Expo и React DevTools для 90% задач отладки.

Управляющее государство в приложении Expo

Приложения Expo - это приложения React Native, поэтому управление состоянием работает точно так же.

• React Context и useReducer для простого и умеренно сложного состояния.
• Zustand или Jotai для легкой, свободной от шарнира государственной библиотеки.
• Инструментарий Redux для крупномасштабных приложений со многими взаимосвязанными срезами состояния.

Expo не навязывает никакого конкретного выбора. Для начинающих рекомендуется начинать со встроенных крючков React. Вы всегда можете перейти к более сложному решению позже.

Пример с контекстом реакции:

import { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
 const [theme, setTheme] = useState('light');
 return (
 <ThemeContext.Provider value={{ theme, setTheme }}>
 {children}
 </ThemeContext.Provider>
 );
}
export const useTheme = () => useContext(ThemeContext);

Тестирование вашего приложения

Expo поддерживает Jest из коробки. Run и настройка Jest в package.json. Вы можете писать единичные тесты для ваших компонентов и снимков. Для сквозного тестирования Detox работает хорошо, но требует нативных сборок. Для управляемого рабочего процесса рассмотрите Maestro — мобильный инструмент тестирования пользовательского интерфейса, который работает с Expo Go.

Пример простого теста для компонента кнопки:

import React from 'react';
import { render, fireEvent } from '@testing-library/react-native';
import App from '../App';

test('button shows alert', () => {
 const { getByText } = render(<App />);
 fireEvent.press(getByText('Click Me'));
 // Assert that Alert was called (use jest.spyOn)
});

Создание и публикация вашего приложения

Как только ваше приложение будет готово, вы захотите опубликовать его в App Store и Google Play. Expo упрощает это с помощью облачных сервисов.

Экспо-сервисы (EAS)

EAS Build создает готовые к производству нативные двоичные файлы без необходимости установки Xcode или Android Studio.

1. :
2. Введите
3. Настройка с профилями сборки (разработка, предварительный просмотр, производство).
4. Бег: или

EAS создает ваше приложение в облаке и возвращает файл .ipa или .apk. Затем вы можете отправлять в магазины, используя .

Обновления Over-the-Air

С помощью вы можете нажимать обновления JavaScript непосредственно на пользователей без повторного отправки в магазины. Настройте канал в app.json и запустите (или используйте EAS Update). Приложение проверяет обновления при запуске и загружает последний пакет. Это игровой чейнджер для быстрого исправления ошибок.

Пример конфигурации обновления app.json:

{
 "expo": {
 "updates": {
 "url": "https://u.expo.dev/YOUR_PROJECT_ID",
 "enabled": true
 }
 }
}

Ограничения управляемого рабочего процесса

Хотя Expo является мощным, есть сценарии, в которых вам может потребоваться выбросить голый рабочий процесс:

• Пользовательские нативные модули не доступны в Expo SDK (например, новая библиотека Bluetooth, которая не была обернута).
• Справочные задачи, которые должны работать бесконечно (Expo Go и управляемые приложения имеют ограничения на фоновое выполнение).
• Настройка push-уведомлений за пределами того, что предлагает Expo (например, пользовательские звуки уведомлений или богатые носители).
• Большие размеры файлов с определенными нативными библиотеками (управляемые приложения включают в себя все Expo SDK, который добавляет ~20 МБ).
• Необходимо запустить код перед инициализацией приложения (управляемые приложения имеют фиксированную точку входа).

К счастью, вы можете «выбросить» (на самом деле запустить ) в любое время. Это генерирует папки и , позволяя настраивать собственный код. Как только вы это сделаете, вы можете продолжить использовать инструменты Expo, но потерять удобство мгновенного предварительного просмотра с Expo Go. Однако вы все равно можете использовать обновления EAS Build и OTA.

Лучшие практики для развития Expo

Обновите свой Expo SDK

Expo выпускает новую версию SDK каждые несколько месяцев. Обновление относительно безболезненно: запустите и исправьте любые изменения. Оставайтесь в курсе событий.

Используйте TypeScript с самого начала

Экспо первого класса поддерживает TypeScript. При запуске выберите шаблон TypeScript. Он рано улавливает множество ошибок и улучшает автозаполнение IDE.

Оптимизируйте имиджевые активы

Используйте для сжатия изображений для вашего приложения. Также, используйте для загрузки изображения с кэшированием и заполнителями.

Пользуйтесь услугами Expo Community

Сервер Discord, форумы и обсуждения GitHub чрезвычайно активны. Многие распространенные проблемы были решены. Перед написанием пользовательского кода ищите документацию Expo или рецепты сообщества.

План требований App Store

Даже в Expo вы должны соблюдать политику Apple и Google. Убедитесь, что в вашем приложении есть манифесты конфиденциальности, соответствующие значки и брызги экранов. Используйте для установки разрешений и метаданных приложения.

Обычные подводные камни и как их избежать

• Забыв установить одноранговые зависимости: При использовании модулей Expo иногда необходимо вручную устанавливать соответствующие пакеты (например, для навигации).
• Превышение производительности консолей.log: Удалите все консольные утверждения перед началом строительства. Используйте для автоматизации этого.
• Размеры жесткого кодирования : Используйте крючок от React Native для поддержки различных размеров экрана, включая планшеты.
• Опираясь на Expo Go для окончательного тестирования: Expo Go отлично подходит для разработки, но некоторые API могут вести себя по-разному на автономной сборке. Всегда тестируйте на сборке производства (EAS Build) перед выпуском.

Переход от начинающего к производству

Expo — это не просто инструмент обучения; он используется многими производственными приложениями, в том числе приложениями для крупных компаний. Управляемый рабочий процесс может обрабатывать приложения средней сложности. Если вашему приложению нужна тяжелая нативная интеграция, всегда доступен голый рабочий процесс. Ключ заключается в том, чтобы начать просто и добавлять нативный код только при необходимости.

Овладевая Expo, вы изучаете стандартные шаблоны React Native, которые передаются в любой родной проект. Навыки, которые вы получаете - дизайн компонентов, управление состоянием, навигация и интеграция API - это именно то, что вам нужно для профессиональной мобильной разработки.

Следующие шаги и ресурсы

• Прочитайте официальный учебник Экспо для пошагового прохождения.
• Для этого нужно изучить приложение Expo Go , чтобы увидеть, что доступно.
• Присоединяйтесь к Expo Discord для поддержки сообщества.
• Проверьте Expo Snack на прототип прямо в вашем браузере.

Создание мобильных приложений с помощью Expo устраняет первоначальные барьеры и позволяет сосредоточиться на том, что имеет значение: логика, дизайн и пользовательский опыт вашего приложения.