Всем привет! Я собираюсь написать цикл статей о работе с React Native. Эти статьи предназначены для тех, кто только начинает работу с этим кроссплатформенным фреймворком, но уже обладает некоторым опытом работы с React. Я постараюсь подробно изложить каждый шаг, чтобы вам не пришлось искать дополнительную информацию в интернете. Однако некоторые базовые аспекты, например, что такое React, Node и прочее, которые не будут объяснены, вы сможете изучить по ссылочкам, что я прикреплю.

Введение

Мой интерес к написанию цикла статей и к React Native обусловлен желанием изучить не только язык программирования для веба, но и создавать кроссплатформенные приложения. Имея опыт разработки на React, выбор быстро пал на React Native. Кроме того, чтобы избежать многократной загрузки apk на устройство, я буду использовать Expo.

Приложение, которое я хочу разработать, будет называться СтудПланнер. Его цель — облегчить студенческую жизнь, объединив все электронные ресурсы в одном приложении. Я уже разработала дизайн в Figma, поэтому совпадения с существующими приложениями являются случайными.

Отличия React Native от React

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

Как вы уже успели заметить, в React Native отсутствует привычное для веб-разработки дерево DOM. Вместо этого мы используем полноценные компоненты, которые функционируют по тем же принципам.

Одной из полезных ссылок, которая пригодится нам в работе с компонентами, является следующая: документация. В ней представлена информация о всех вспомогательных компонентах, доступных в React Native на сегодняшний день. На данный момент нас особенно интересуют компоненты View, который выполняет роль блочного элемента (например, <div>) и Text (название которого говорит само за себя:) ) — это текстовый компонент (например, <span>).

Создание проекта

Для начала работы с React Native достаточно скачать шаблон с помощью команды npx create-expo-app@latest и запустить его. Однако, чтобы глубже разобраться в том, как работать с React Native, я предлагаю создать проект с нуля.

1. Создайте папку StudPlanner;

2. Внутри папки StudPlanner создайте папку src, где будут находиться основные компоненты нашего приложения;

3. В корневой папке создайте файл index.ts — это будет точка входа в приложение;

4. Убедитесь, что у вас установлена стабильная версия Node (в данном случае я буду использовать не самую последнюю, а 20): nvm use 20;

5. Теперь создадим package.json, где пропишем команды для упрощения запуска приложения и его сборки, а также необходимые библиотеки;

6. Установим зависимости командой npm install.

// StudPlanner/package.json
{
  "name": "studplanner", // название нашего проекта
  "version": "1.0.0", // версия приложения
  "private": true, // предотвращает случайную публикацию пакета в публичный реестр 
  "description": "Это приложение, созданное для облегчения студенческой жизни",
  "main": "index.ts", // точка входа в приложение
  "scripts": { // объект с командами для запуска приложения
    "start": "expo start", // запустить приложение
    "lint": "expo lint", // запускает линтер
    "build:web": "expo export --platform web", // собрать приложение для веба
    "build:apk": "eas build -p android --profile preview-apk",  // собрать apk приложение для android
    "build": "npm run build:web && npm run build:apk" // запускает сборку для web и Android последовательно 
  },
  "dependencies": { // список библиотек, необходимых для работы приложения в production
    "expo": "~54.0.32", // ядро фреймворка Expo для работы с нативными функциями устройства
    "react": "19.1.0", // react для рендеринга в вебе
    "react-dom": "19.1.0", //  для рендеринга в вебе :)
    "react-native-web": "0.21.0", // позволяет нативным компонентам рендериться на вебе
    "react-native": "0.81.0",  // для нативных функций Android/IOS
    "@expo-google-fonts/montserrat": "^0.4.2" // любимый шрифт моего мужа :)
  },
  "devDependencies": {
    "@babel/core": "^7.25.2", // ядро Babel, которое позволяет транспилировать TS/JS в код, понятный браузерам и React Native
    "@types/react": "~19.1.0", // файлы с описанием типов TS для библиотеки React
    "typescript": "~5.9.2", // компилятор TypeScript 
    "eas-cli": "^16.0.0" // для облачного сервиса eas (Expo Application Services)
  }
}

В конце этой статьи я покажу, как собрать пакет APK с нашем приложением, но для этого мы будем использовать облачный сервис от команды Expo — EAS.

Что дает EAS в нашем случае:

1. Облачные сборки — не нужно настраивать Android Studio, SDK и окружение на своем компьютере;

2. Автоматическое подписание APK — EAS сам генерирует и управляет ключами подписи;

3. Кэширование зависимостей — последующие сборки выполняются быстрее;

4. Простое распространение — готовый APK можно скачать по ссылке или QR-коду.

Настройка в нашем проекте:

Для работы этого сервиса нам необходимо создать файл eas.json в корневой папке нашего приложения и войти в аккаунт Expo с помощью npx eas login:

// StudPlanner/eas.json
{
  "build": {
    "preview-apk": { // название профиля сборки (можете назвать как угодно)
      "distribution": "internal", //сборка для внутреннего тестирования (можно скачать по ссылке)
      "android": {
        "buildType": "apk" // формат выходного файла (APK для установки на устройство)
      }
    }
  }
}

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

Далее мы возвращаемся к папке src.
Сейчас нам необходимо создать тестовый компонент, который просто выведет фразу:

Hello! Welcome to StudPlanner!

Создадим файл App.tsx и напишем там главный компонент нашего приложения —
App. Для того, чтобы App смог вывести текст нам необходимо использовать компонент Text из библиотеки react-native, но для красоты поместим его в блок View из той же библиотеки. Вот так это будет выглядеть:

// StudPlanner/src/App.tsx
import { View, Text} from "react-native";

const App = () => {
    return (
        <View>
            <Text>
                Hello! Welcome to StudPlanner!
            </Text>
        </View>
    );
};

Чтобы у нас всё было по красоте, нужно стилизовать наши компоненты. Так как React Native не работает с CSS, нам необходимо использовать встроенную систему стилей — StyleSheet.

Это как CSS только:

1. Пишется в JavaScript (объекты, а не строки);

2. Нет селекторов классов (стили привязываются напрямую к компонентам);

3. Автоматическая оптимизация (кэширование стилей).

Для этого мы создадим некую структуру style и распишем что-то наподобие классов в CSS. В конце концов наш компонент будет выглядеть так (не забываем экспортировать его):

// StudPlanner/src/App.tsx
import { View, Text, StyleSheet } from "react-native";

const App = () => {
    return (
        <View style={style.container}>  // добавили стили
            <Text style={style.text}>   // добавили стили
                Hello! Welcome to StudPlanner!
            </Text>
        </View>
    );
};

const style = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#191A1F'
    },
    text: {
        color: 'white',
        fontSize: 24,
        textAlign: 'center',
        fontWeight: 'bold'
    }
});

export default App;

Вернемся к index.ts. Теперь необходимо "зарегистрировать" наш App, чтобы приложение знало, какой компонент является корневым. Импортируем registerRootComponent из expo.

Как итог у нас получается следующее:

// StudPlanner/index.ts
import { registerRootComponent } from "expo";
import App from './src/App';

registerRootComponent(App);
});

Ну, и нам остаётся только запустить наше приложение: npm run start.

Полная инструкция тестирования на WSL2 с Android

Для начала попробуйте запустить проект с флагом npx expo start --tunnel
Если проект нормально запустился, просто сканируйте qr-код через приложение Expo Go на устройстве, если нет — читайте дальше.

Настройка ADB в Windows для WSL2

1. Установите ADB на Windows

• Скачайте Platform Tools с официального сайта Android

• Распакуйте архив (например, в C:\platform-tools\)

• Добавьте в PATH Windows:

  • Win + R → sysdm.cpl → "Дополнительно" → "Переменные среды"

  • В "Системные переменные" найдите Path → "Изменить"

  • Добавьте путь: C:\platform-tools

  • Нажмите OK во всех окнах

  • Перезагрузите компьютер

# Проверить на windows
adb --version

2. Настройка телефона

• На телефоне: Настройки → О телефоне → 7 раз нажмите "Номер сборки"

• Вернитесь в Настройки → Для разработчиков → Включите:

  • Отладка по USB

  • Оставаться активным при подключении

3. В WSL создайте алиас для Windows ADB

echo "alias adb='/mnt/c/platform-tools/adb.exe'" >> ~/.bashrc
echo "alias fastboot='/mnt/c/platform-tools/fastboot.exe'" >> ~/.bashrc
source ~/.bashrc

4. Проверьте подключение в WSL

# Проверить версию
adb --version
# Должно быть: "Running on Windows"

# Проверить устройства
adb devices

5. Подключение телефона

Вариант A: Через USB

# Подключите телефон по USB
adb devices
# Разрешите отладку на телефоне

# Для Expo нужно пробросить порт
adb reverse tcp:8081 tcp:8081

Вариант B: Через Wi-Fi (я подключала так)

#  С подключенным USB:
adb tcpip 5555

# Узнать IP телефона
adb shell ip route
# Или в настройках телефона: Настройки → О телефоне → Статус → IP адрес

# И подключаемся по Wi-Fi
adb connect 192.168.X.X:5555  # замените на IP телефона

Запустить проект

1. Вводим npm run start

2. Сканируем qr-код с помощью приложения Expo Go или вводим там ссылку exp://localhost:8081

Сборка APK

В нашем package.json мы уже прописали скрипт для сборки, поэтому нам достаточно ввести команду, отсканировать qr-код и скачать готовый пакет:

npm run:build:apk

Заключение

Таким образом, у нас получилось запустить маленькое приложение, которое остаётся только развивать :)