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

Часть 1. Введение в Expo

В первой части нашего руководства мы разберём:

• Что такое Expo и почему его выбирают разработчики?
• Ключевые особенности Expo.
• Установка и первый запуск приложения.

Что такое Expo?

Expo — это платформа для разработки мобильных приложений с использованием React Native. Она предоставляет инструменты, библиотеки и серверы, которые упрощают процесс разработки, тестирования и публикации.

С Expo вы можете:

• Создавать кроссплатформенные приложения для iOS и Android с одним кодом.
• Запускать приложение на своём телефоне без сборки APK или IPA.
• Использовать мощные встроенные API (например, работу с камерой, уведомлениями, геолокацией).

Почему выбирают Expo?

• Быстрота и простота: Expo экономит ваше время. Вам не нужно устанавливать Android Studio, Xcode или настраивать эмуляторы. Достаточно одной команды, чтобы запустить проект.
• Инструменты "из коробки": Expo предоставляет готовый набор модулей, таких как: expo-camera для работы с камерой, expo-notifications для push-уведомлений, expo-location для определения геолокации.
• Автономная сборка: Вы можете собрать готовые APK или IPA файлы прямо из Expo. Это особенно полезно для новичков, которым сложно разобраться с нативными инструментами.
• Обновления без магазина: Expo поддерживает OTA-обновления (Over-the-Air). Это значит, что вы можете обновлять приложение без необходимости отправлять новую версию в App Store или Google Play.

Когда использовать Expo?

Expo идеален для:

• Быстрого прототипирования.
• Небольших и средних приложений, которые не требуют кастомных нативных модулей.
• Новичков, которые хотят сосредоточиться на изучении React Native.

Однако, если вам нужно:

• Подключать сторонние нативные библиотеки (например, для работы с Bluetooth или сложной графикой).
• Глубокая кастомизация нативного кода.

Тогда лучше использовать Bare Workflow, где вы получаете полный доступ к нативной части.

Основные инструменты Expo

• Expo CLI: Это инструмент командной строки для создания, запуска и сборки приложений.
• Expo Go: Приложение для тестирования вашего кода на реальном устройстве. Вы просто сканируете QR-код и видите изменения в реальном времени.
• Expo Dev Tools: Веб-интерфейс для управления проектом. Здесь вы можете увидеть журналы ошибок, подключить своё устройство или настроить параметры приложения.

Установка и первый запуск приложения

Давайте перейдём от теории к практике!

Шаг 1: Установка Expo CLI

Убедитесь, что на вашем компьютере установлен Node.js (если нет, скачайте с официального сайта).

Установите Expo CLI глобально:

npm install -g expo-cli

Шаг 2: Создание нового проекта

Выполните команду:

expo init MyFirstExpoApp

Вас попросят выбрать шаблон:

• blank: Пустое приложение, только React Native.
• blank (TypeScript): То же, но с поддержкой TypeScript.
• tabs: Шаблон с несколькими экранами и навигацией.

Для начала выберите blank.

Перейдите в созданную папку:

cd MyFirstExpoApp

Шаг 3: Запуск приложения

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

npm start

Откроется Expo Dev Tools в браузере. Здесь вы увидите QR-код, который можно отсканировать с помощью приложения Expo Go (скачайте из App Store или Google Play).

Шаг 4: Изменение кода

Откройте файл App.js в любом текстовом редакторе (например, VS Code). Измените содержимое:

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Привет, Expo!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
});

Сохраните файл, и приложение автоматически обновится. Вы увидите текст "Привет, Expo!" на экране телефона.

Что дальше?

Теперь у вас есть базовые знания о том, как начать с Expo. В следующей части мы углубимся в работу с модулями Expo, такими как камера, уведомления и геолокация. Мы также рассмотрим, как собрать готовый APK/IPA файл для публикации.

Expo — это идеальный старт для любого React Native разработчика. С ним вы сможете быстрее освоить основы и создавать крутые приложения. 🚀

Часть 2. Работа с модулями Expo

Теперь, когда мы познакомились с Expo и создали свой первый проект, давайте углубимся в использование его мощных инструментов. В этой части мы разберём:

• Как подключать и использовать модули Expo.
• Основные модули: камера, геолокация и уведомления.
• Практическое создание функционала с использованием этих модулей.

Модули Expo: зачем они нужны?

Expo предоставляет множество встроенных API, которые облегчают работу с устройством. Вам не нужно вручную подключать нативные библиотеки или разбираться в Android и iOS коде — достаточно просто подключить нужный модуль.

Вот несколько популярных модулей:

• expo-camera — работа с камерой.
• expo-location — доступ к геолокации.
• expo-notifications — отправка push-уведомлений.
• expo-media-library — доступ к файловой системе и галерее.
• expo-sensors — работа с акселерометром, гироскопом и другими сенсорами.

Как подключать модули?

Установка модуля

Например, для работы с камерой выполните команду:

expo install expo-camera

Импорт модуля

После установки вы можете импортировать его в код:

import { Camera } from 'expo-camera';

Запрос разрешений

Многие модули требуют разрешений (например, на доступ к камере или геолокации). Expo предоставляет удобные методы для этого.

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

Просто добавьте компонент или вызовите функцию из модуля.

Пример: Работа с камерой

Установка модуля камеры

Установите модуль:

expo install expo-camera

Запрос разрешений и отображение камеры

Вот как это можно сделать:

import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { Camera } from 'expo-camera';

export default function App() {
  const [hasPermission, setHasPermission] = useState(null); // Состояние разрешений
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back); // Тип камеры
  const cameraRef = useRef(null); // Ссылка на камеру

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestCameraPermissionsAsync(); // Запрашиваем разрешение
      setHasPermission(status === 'granted');
    })();
  }, []);

  const takePicture = async () => {
    if (cameraRef.current) {
      const photo = await cameraRef.current.takePictureAsync(); // Делаем снимок
      console.log(photo.uri); // Логируем URI изображения
    }
  };

  if (hasPermission === null) {
    return <Text>Запрашиваем разрешение...</Text>;
  }
  if (hasPermission === false) {
    return <Text>Доступ к камере запрещён</Text>;
  }

  return (
    <View style={styles.container}>
      <Camera style={styles.camera} type={cameraType} ref={cameraRef} />
      <View style={styles.controls}>
        <Button
          title="Сделать фото"
          onPress={takePicture}
        />
        <Button
          title="Сменить камеру"
          onPress={() => {
            setCameraType(
              cameraType === Camera.Constants.Type.back
                ? Camera.Constants.Type.front
                : Camera.Constants.Type.back
            );
          }}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  camera: {
    flex: 1,
  },
  controls: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 20,
  },
});

Пример: Работа с геолокацией

Установка модуля геолокации

Установите модуль:

expo install expo-location

Получение координат

Добавьте следующий код:

import React, { useState, useEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      const { status } = await Location.requestForegroundPermissionsAsync(); // Запрашиваем разрешение
      if (status !== 'granted') {
        setErrorMsg('Доступ к геолокации запрещён');
        return;
      }

      const loc = await Location.getCurrentPositionAsync({}); // Получаем координаты
      setLocation(loc);
    })();
  }, []);

  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        {errorMsg
          ? errorMsg
          : location
          ? `Широта: ${location.coords.latitude}, Долгота: ${location.coords.longitude}`
          : 'Определяем местоположение...'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 16,
  },
});

Пример: Уведомления

Установка модуля уведомлений

Установите модуль:

expo install expo-notifications

Отправка уведомлений

import React, { useEffect } from 'react';
import { Button, View, StyleSheet } from 'react-native';
import * as Notifications from 'expo-notifications';

export default function App() {
  useEffect(() => {
    Notifications.requestPermissionsAsync(); // Запрашиваем разрешение
  }, []);

  const sendNotification = async () => {
    await Notifications.scheduleNotificationAsync({
      content: {
        title: 'Привет!',
        body: 'Это тестовое уведомление.',
      },
      trigger: { seconds: 5 }, // Отправляем через 5 секунд
    });
  };

  return (
    <View style={styles.container}>
      <Button title="Отправить уведомление" onPress={sendNotification} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

Часть 3. Сборка приложения и публикация

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

• Как собрать приложение (APK/IPA).
• Подготовку к публикации.
• Интеграцию с внешними сервисами (например, аналитика и глубокие ссылки).
• Советы для успешной публикации.

Сборка приложения

Expo предоставляет инструмент для сборки приложений, который избавляет вас от необходимости разбираться с Android Studio или Xcode.

Expo Application Services (EAS Build)

Expo предоставляет сервис EAS Build, который упрощает процесс создания APK и IPA файлов.

Установка EAS CLI

Для начала установите EAS CLI:

npm install -g eas-cli

Инициализация EAS в проекте

Выполните команду:

eas build:configure

Эта команда создаст файл eas.json, в котором будут указаны параметры сборки.

Сборка для Android

Для сборки APK выполните:

eas build --platform android

Expo создаст APK файл, и вы сможете скачать его через ссылку, которая появится в консоли.

Вы можете выбрать между apk (для тестирования) и aab (для публикации в Google Play). Убедитесь, что у вас есть Google Play Console для публикации приложения.

Сборка для iOS

Для сборки IPA файла выполните:

eas build --platform ios

Требования:

• У вас должен быть аккаунт Apple Developer.
• Сборка для iOS возможна только на macOS или через EAS Build.

После сборки файл будет доступен через консоль. Его можно загрузить в App Store через Transporter (официальное приложение Apple для публикации).

Подготовка к публикации

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

Оптимизация кода

• Используйте production сборку.
• Убедитесь, что ваше приложение собрано для продакшна, где отключены DevTools и горячая перезагрузка.
• Удалите лишние зависимости. Убедитесь, что в проекте нет неиспользуемых модулей. Это сократит размер приложения.

Настройка app.json

Файл app.json содержит метаданные вашего приложения, такие как название, значок и начальный экран.

Пример app.json:

{
  "expo": {
    "name": "My First Expo App",
    "slug": "my-first-expo-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "android": {
      "package": "com.example.myapp",
      "versionCode": 1
    },
    "ios": {
      "bundleIdentifier": "com.example.myapp",
      "buildNumber": "1.0.0"
    }
  }
}

Настройка значков и заставок

Иконка приложения: Создайте квадратное изображение 1024x1024 в формате PNG и укажите его в icon в app.json.

Заставка (splash screen): Создайте изображение 1080x1920 и укажите его в секции splash.

Интеграция с внешними сервисами

Аналитика (например, Amplitude)

Аналитика помогает вам понять, как пользователи взаимодействуют с приложением.

Установите Amplitude:

expo install expo-analytics-amplitude

Пример использования:

import * as Amplitude from 'expo-analytics-amplitude';

Amplitude.initializeAsync('YOUR_API_KEY');

Amplitude.logEventAsync('UserLoggedIn');

Глубокие ссылки (Deep Linking)

Глубокие ссылки позволяют открывать приложение с определёнными параметрами.

Настройте глубокие ссылки в app.json:

"expo": {
  "scheme": "myapp"
}

Теперь вы сможете открыть приложение с помощью URL:

myapp://some-path

Используйте модуль Linking для обработки ссылок:

import { Linking } from 'react-native';

useEffect(() => {
  const handleLink = (url) => {
    console.log('Ссылка открыта:', url);
  };

  Linking.addEventListener('url', ({ url }) => handleLink(url));
  return () => Linking.removeEventListener('url');
}, []);

Публикация приложения

Google Play

Загрузите файл aab в Google Play Console.

Заполните метаданные (скриншоты, описание).

Отправьте приложение на проверку.

App Store

Загрузите IPA файл через Transporter.

Добавьте приложение в App Store Connect.

Заполните метаданные и отправьте на проверку.

Советы для успешной публикации

• Тестируйте приложение. Протестируйте его на разных устройствах и операционных системах.
• Соблюдайте правила магазинов. Ознакомьтесь с требованиями Google Play и App Store.
• Подготовьте качественные материалы. Используйте красивые скриншоты, видео и описание для привлечения пользователей.

Заключение

Теперь вы знаете всё необходимое для работы с Expo: от создания приложения до его публикации. Expo делает процесс разработки быстрым и удобным, позволяя сосредоточиться на главном — создании крутых приложений.

Следующий шаг за вами: внедряйте новые функции, экспериментируйте с модулями и запускайте свои приложения/