Первая программа на React Native
Первая программа на React Native
Практический маршрут от пустого проекта до экрана со списком, переходом на второй экран и сохранением данных. Теория и сравнение стеков — в React Native; ускоренный старт через Expo Go — в Первая программа на Expo.
| Шаг | Тема | Раздел ниже |
|---|---|---|
| 1 | Окружение и проект | Установка и создание проекта |
| 2 | UI и вёрстка | Компоненты и Flexbox |
| 3 | Данные на экране | Состояние, пропсы и списки |
| 4 | Несколько экранов | Навигация |
| 5 | Сервер и диск | API и локальное хранилище |
| 6 | Release | Сборка и публикация |
React Native переносит идеи React на iOS и Android — компоненты, props и useState, но вместо <div> — <View>, вместо <span> — <Text>. Сначала закрепите те же паттерны в браузере — галерея React-компонентов (Lab).
Установка и создание проекта
Что установить
| Компонент | Зачем |
|---|---|
| Node.js LTS | npm, Metro, Expo CLI |
| Expo Go (телефон) | Запуск без сборки APK на старте |
| Android Studio (по желанию) | Эмулятор Android, позже release-сборка |
| Xcode (только macOS) | Симулятор и сборка под iPhone |
Проверка:
node -v # v20 или v22 LTS
npm -v
Два пути старта
| Путь | Команда | Когда выбирать |
|---|---|---|
| Expo | npx create-expo-app@latest | Обучение, прототип, QR на телефон |
| React Native CLI | npx @react-native-community/cli init | Свои нативные модули с первого дня |
Ниже везде Expo — короче путь; JSX и API те же в bare workflow.
Создание и запуск
npx create-expo-app@latest MyFirstApp
cd MyFirstApp
npx expo start
В терминале появится QR-код. Откройте Expo Go, отсканируйте код. ПК и телефон должны быть в одной сети; иначе npx expo start --tunnel.
Структура шаблона:
MyFirstApp/
App.js # точка входа (или app/ при Expo Router)
app.json # имя, иконка, bundle id
package.json
assets/
Зависимости для Expo ставьте через npx expo install <пакет> — так подбирается версия под SDK.
Компоненты и Flexbox
Базовые компоненты
| Компонент | Роль | Аналог в веб-React |
|---|---|---|
View | Контейнер, layout | div |
Text | Любой текст на экране | span / p |
Image | Картинка (source={{ uri }} или require) | img |
Pressable | Кнопка, область нажатия | button |
TextInput | Однострочный ввод | input |
ScrollView | Прокрутка, если контент не помещается | overflow: auto |
FlatList | Длинные списки (виртуализация) | список с windowing |
Строку нельзя положить прямым ребёнком View — оберните в <Text>. Иначе ошибка "Text strings must be rendered within a Text component".
Flexbox в React Native
В RN все View по умолчанию — flex с направлением column (сверху вниз). Это отличается от CSS в браузере, где блочный поток иной.
| Свойство | Назначение |
|---|---|
flex: 1 | Занять оставшееся место в родителе |
flexDirection | 'row' | 'column' |
justifyContent | Распределение по главной оси (center, space-between, …) |
alignItems | Выравнивание по поперечной оси |
gap | Отступ между дочерними элементами |
Пример карточки с шапкой и кнопкой внизу:
Код ITЗагрузка примера кода…
StyleSheet.create — объекты JavaScript; не все CSS-свойства доступны (нет grid, ограничен position).
Состояние, пропсы и списки
useState на одном экране
Код ITЗагрузка примера кода…
Пропсы — переиспользуемый дочерний компонент
function Greeting({ name, onPress }) {
return (
<Pressable onPress={onPress} style={styles.greetBox}>
<Text>Привет, {name || 'гость'}</Text>
</Pressable>
);
}
// В родителе:
<Greeting name={name} onPress={() => setCount((c) => c + 1)} />
Пропсы только для чтения в дочернем компоненте; изменяемое состояние экрана — в useState родителя или в глобальном store (Context, Zustand, Redux) в крупных приложениях.
FlatList для списков
Для десятков и сотен строк ScrollView с map тормозит. FlatList рисует только видимые ячейки:
Код ITЗагрузка примера кода…
keyExtractor обязателен для стабильных ключей при обновлении данных.
Навигация между экранами
Стандарт — React Navigation. Установка в Expo-проекте:
npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context
Минимальный стек из двух экранов (App.js):
Код ITЗагрузка примера кода…
| Понятие | Назначение |
|---|---|
navigation.navigate('Details', params) | Переход вперёд с параметрами |
route.params | Данные, переданные на экран |
navigation.goBack() | Возврат |
Stack.Screen options | Заголовок, кнопка "Назад" на iOS/Android |
В новых проектах Expo часто выбирают Expo Router (файлы в app/ = маршруты). Обзор — в Expo.
API и локальное хранилище
Запрос к REST API
Тот же fetch, что и в веб-React. Пример загрузки списка постов:
Код ITЗагрузка примера кода…
На реальном устройстве для http://127.0.0.1 используйте IP компьютера в LAN или HTTPS; localhost на телефоне указывает на сам телефон.
Локальное хранилище
| Инструмент | Когда |
|---|---|
| AsyncStorage | Настройки, черновик, кэш JSON (не для паролей) |
| expo-secure-store | Токены, секреты (ограниченный объём) |
SQLite (expo-sqlite) | Структурированные данные офлайн |
AsyncStorage:
npx expo install @react-native-async-storage/async-storage
import AsyncStorage from '@react-native-async-storage/async-storage';
const KEY = '@myapp/onboarding_done';
export async function saveOnboardingDone() {
await AsyncStorage.setItem(KEY, '1');
}
export async function isOnboardingDone() {
const v = await AsyncStorage.getItem(KEY);
return v === '1';
}
Вызовите saveOnboardingDone после первого входа и при старте приложения проверяйте флаг, чтобы показать нужный экран.
Сборка и публикация
| Этап | Expo | Bare RN |
|---|---|---|
| Dev на телефоне | Expo Go + npx expo start | Metro + эмулятор / USB |
| Store-сборка | EAS Build | Gradle (Android), Xcode (iOS) |
| Подпись | eas credentials / профили в eas.json | Keystore, provisioning profile |
npm install -g eas-cli
eas login
eas build:configure
eas build --platform android
Готовый AAB загружается в Google Play; APK — для тестов и RuStore. Пошагово: Публикация Android, цепочка Gradle на Windows — Сборка и развёртывание.
Отладка
| Действие | Как |
|---|---|
| Меню разработчика | Встряхнуть устройство или m в терминале Expo |
| Очистка кэша Metro | npx expo start -c |
| Логи Android | npx react-native log-android или Logcat |
| USB Android | Отладка по USB |
Частые ошибки
| Симптом | Причина |
|---|---|
| Metro error | npx expo start -c, переустановка node_modules |
<View> must have single child | Оберните соседние элементы в один View или Fragment |
Text strings must be in <Text> | Строка вне Text |
Network request failed | Неверный URL, HTTP без разрешения, нет сети |
| Navigation undefined | Нет NavigationContainer в корне |
| iOS build only on Mac | IPA требует macOS и Xcode |
Что попробовать
- Соберите экран со
FlatListи переходом вDetailsчерез React Navigation. - Подгрузите данные с публичного API и сохраните последний поиск в AsyncStorage.
- Выпустите internal-тест через
eas buildи Публикация Android-приложения.
Связанные материалы
- React Native — архитектура, Expo и bare workflow, EAS
- Первая программа на Expo
- Первая программа на React (веб) — те же хуки и
fetch - Capacitor — веб в нативной оболочке
- Dart / Flutter — альтернатива без JavaScript
В подборках
Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:
Первые шаги (маршрут подборки) — Первая программа Electron с React, Первая программа на Expo, Первая программа на Axum, Первые шаги с SQL, Первая программа на Fiber, Первые шаги с MongoDB.