Оглавление
React Native
Мобильные приложения для iOS и Android на React: компоненты, стили, навигация и Expo.
1.Начало работы
- Что такое React Native и ExpoКак React Native превращает компоненты в настоящий интерфейс iOS и Android и зачем нужен Expo.
- Установка и первый проектЧто установить, как создать проект Expo командой create-expo-app и что лежит в его папках.
- Запуск на телефоне, эмуляторе и в браузереКак запустить проект Expo командой expo start и открыть его в Expo Go, эмуляторе или браузере.
2.Интерфейс
- Базовые компоненты: View, Text, ImageТри компонента, из которых состоит любой экран: контейнер View, текст Text и картинка Image.
- Стили и StyleSheetКак оформлять компоненты: проп style, StyleSheet.create, единицы размеров и объединение стилей.
- Раскладка с FlexboxКак располагать элементы на экране с Flexbox и чем он отличается от веба.
- Поле ввода TextInputКак принять текст от пользователя: TextInput, onChangeText, тип клавиатуры и многострочный ввод.
- Нажатия: Button и PressableКак обработать нажатие: простая кнопка Button и настраиваемый Pressable с эффектом нажатия.
- Состояние и событияРабочий список задач: добавление, отметка и удаление через useState и обработчики нажатий.
- Списки с FlatListКак вывести длинный прокручиваемый список: data, renderItem, keyExtractor и пустое состояние.
- ScrollView и SectionListКогда нужен ScrollView, а когда FlatList, и как вывести список с разделами через SectionList.
3.Навигация с Expo Router
- Экраны и маршруты на файлахКак Expo Router превращает файлы папки app в экраны и как переходить между ними с помощью Link.
- Стек экранов и шапкаКак работает стековая навигация в Expo Router: макет _layout.tsx, заголовки экранов и переходы из кода.
- Динамические экраны и параметрыЭкран статьи по адресу /posts/[id]: передача параметра через Link и чтение через useLocalSearchParams.
- ВкладкиНижняя панель вкладок в Expo Router: группа (tabs), макет с Tabs и иконки вкладок.
4.Данные
- Загрузка данных из APIСтатьи блога из JSONPlaceholder: fetch в эффекте, индикатор загрузки, ошибка с повтором и обновление жестом.
- Хранение данных: AsyncStorageКак сохранить список задач на устройстве с AsyncStorage, чтобы он не пропадал после перезапуска.
- Секреты: expo-secure-storeКак хранить токен входа в зашифрованном хранилище устройства с помощью expo-secure-store.
5.Возможности устройства
- Картинки, ресурсы и иконкиКак подключать файлы из assets, показывать картинки через expo-image и добавлять векторные иконки.
- Различия платформ: PlatformКак узнать, где запущено приложение, и сделать разное поведение для iOS, Android и веба.
- Безопасная зона экранаКак не залезть под вырез камеры, строку состояния и полоску жестов: SafeAreaView и useSafeAreaInsets.
- Работа с клавиатуройКак не дать клавиатуре закрыть поле ввода и как её убрать: KeyboardAvoidingView, Keyboard.dismiss, нажатия в списке.
- Фото из галереи и камерыМодули Expo на примере expo-image-picker: выбор аватара из галереи, съёмка камерой и разрешения.
- ГеолокацияКак узнать координаты и город пользователя с expo-location и правильно запросить разрешение.
- Основы анимацииПлавное появление элементов: встроенный Animated и короткое знакомство с Reanimated.
6.Отладка и публикация
- ОтладкаГде искать ошибки в приложении Expo: console.log в терминале, красный экран, меню разработчика и React Native DevTools.
- Настройки приложения: app.json, иконка и заставкаЧто лежит в app.json: название, версия, идентификаторы, иконка приложения и экран заставки.
- Сборка и публикация с EASОбзор EAS: сборка приложения в облаке, установка на телефон, отправка в App Store и Google Play и обновления.