Курс React Native & Expo Router – Создание приложения для медитации

• Курс по созданию приложения для медитации с использованием Expo и React Native.  

• Используются TypeScript, React, Native Wind, React Native и Expo.  

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

• Необходимые навыки: HTML 5, CSS 3, JavaScript, React, Tailwind и Expo React Native.  

• Ссылка на репозиторий GitHub и инструкции по клонированию и установке зависимостей.  

• Возможность загрузки ресурсов и использования Visual Studio Code для просмотра проекта.  

• Курс не для начинающих, предполагает знание основ веб-разработки.  

• Анонс будущих курсов по HTML 5, CSS 3, командной строке, JavaScript, TypeScript, Tailwind CSS, React и Expo React Native.  

• Призыв подписаться на канал и поддержать проекты.  

• Использование Xcode для запуска симулятора iOS на Mac.  

• Установка Android Studio и эмулятора Android для запуска на Windows.  

• Инструкции по установке и запуску Expo на симуляторе.  

• Установка расширений для форматирования кода и повышения производительности.  

• Создание новой папки для проекта и открытие её в Visual Studio Code.  

• Установка необходимых расширений для работы с Expo и React Native.  

• Запуск команды для создания проекта с использованием Expo.  

• Установка зависимостей и создание структуры проекта.  

• Запуск проекта с помощью команды mpx expo start.  

• Очистка кэша для удаления старых данных.  

• Сканирование QR-кода для установки приложения Expo Go.  

• Использование Expo Go для запуска приложения на физическом устройстве или в симуляторе.  

• Обработка ошибок при разработке.  

• Удаление ненужных файлов и стилей.  

• Настройка текста и стилей для отображения "Hello World".  

• Создание гибкого контейнера и выравнивание содержимого по центру.  

• Сортировка пар ключ-значение для удобства.  

• Удаление шаблонных файлов для создания чистого проекта.  

• Использование Expo Router для маршрутизации на основе файлов.  

• Добавление файлов ресурсов и постоянных файлов.  

• Импорт и экспорт изображений и данных для медитации.  

• Импорт и экспорт изображений для медитации.  

• Определение интерфейса и типов для данных медитации.  

• Настройка цветов и стилей для приложения.  

• Установка Nativewind для использования Tailwind CSS в React Native.  

• Инициализация конфигурационного файла Tailwind.  

• Добавление плагинов для Nativewind и Babel.  

• Создание домашнего экрана с нуля.  

• Применение стилей и фонового изображения.  

• Использование компонента фонового изображения для отображения изображения пляжа.  

• Импортируем изображение пляжа из корневого каталога.  

• Применяем режим изменения размера cover и класс flex one.  

• Перемещаем текст внутрь тегов фонового компонента.  

• Создаем файл underscore layout.tsx для определения общих компонентов.  

• Импортируем слот компонента из expo router.  

• Применяем линейный градиент с использованием библиотеки expo linear gradient.  

• Перемещаем текст в безопасный режим просмотра.  

• Применяем стили к тексту, выделяя его белым цветом и жирным шрифтом.  

• Добавляем строку состояния из expo status bar.  

• Создаем пользовательскую кнопку с прозрачностью и интерфейсом для реквизитов.  

• Применяем стили и обработчик события onpress.  

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

• Указываем изображение для заставки в файле app.json.  

• Тестируем кнопку, проверяя, что она вызывает консольный оператор.  

• Добавляем новый файл для тестирования и используем хук userouter для перехода к нему.  

• Создаем каталог вкладок для организации файлов.  

• Добавляем файл "Медитация на природе" и используем его для навигации.  

• Создаем повторно используемый компонент app gradient для линейного градиента и безопасной зоны.  

• Установка отступов по горизонтали и вертикали.  

• Импорт градиента и использование его в приложении.  

• Создание линейного градиента и передача свойства colors.  

• Удаление ненужного линейного градиента.  

• Установка поля в один пиксель.  

• Использование градиента в новом файле nature meditate.  

• Обертывание текста в градиент приложения.  

• Передача цветов в массиве строк.  

• Настройка текста и стилей для текста "Добро пожаловать".  

• Добавление строки состояния из строки состояния expo.  

• Использование компонента "плоский список" для отображения вертикального списка.  

• Импорт данных для медитации и настройка реквизитов.  

• Использование функции извлечения ключей для идентификации элементов.  

• Установка индикатора вертикальной прокрутки в false.  

• Рендеринг элементов списка с использованием компонента фона изображения.  

• Импорт изображений для медитации.  

• Настройка отображения текста внутри изображений.  

• Применение стилей для текста и обертывание его линейным градиентом.  

• Создание файла макета для панели вкладок.  

• Настройка параметров экрана и активного цвета панели вкладок.  

• Рендеринг вкладок и настройка параметров для каждой вкладки.  

• Обновление макета маршрута для отображения панели вкладок.  

• Использование stack для рендеринга экранов.  

• Настройка значка для вкладки "Медитация" из векторных иконок expo.  

• Изменение цвета значка панели вкладок.  

• Создание новой вкладки "Аффирмации" с использованием значка открытой книги.  

• Импорт значков материалов для упрощения импорта.  

• Применение класса и градиента к экрану.  

• Создание прокрутки и изменение текста.  

• Определение стиля для текста и создание горизонтального списка.  

• Создание нового файла "Галерея управляемых аффирмаций".  

• Определение интерфейса для реквизита и создание каталога моделей.  

• Импорт и реструктуризация данных.  

• Применение стилей к тексту и создание горизонтального списка.  

• Использование компонента flatlist и настройка индикатора горизонтальной прокрутки.  

• Визуализация элементов списка с использованием элемента link и pressable.  

• Импорт галереи аффирмаций и использование точечной карты.  

• Настройка ключевой опоры для однозначной идентификации категории аффирмации.  

• Отображение всех предварительных просмотров аффирмаций горизонтально.  

• Создание папки "Аффирмации" и файла для маршрута.  

• Перезагрузка приложения и создание нового файла макета.  

• Использование компонента stack для отображения заголовка и значения false.  

• Создаем новый файл макета в каталоге аффирмаций.  

• Указываем динамический маршрут с идентификатором элемента.  

• Экспортируем функцию react native и используем tab для доступа к новому компоненту.  

• Используем функцию use local search params для доступа к идентификатору.  

• Определяем класс flex one и используем use state для определения утверждения.  

• Создаем useEffect для обновления состояния при первом переходе к компоненту.  

• Импортируем данные для предварительного просмотра в галерее.  

• Создаем цикл for для определения подтверждения по идентификатору.  

• Обновляем состояние и визуализируем подтверждение.  

• Используем компонент фонового изображения для отображения подтверждения.  

• Применяем линейный градиент и добавляем кнопку "Назад".  

• Возвращаемся к странице индекса аффирмаций при нажатии на кнопку.  

• Отображаем текст на экране сведений об аффирмациях.  

• Используем режим прокрутки для отображения текста.  

• Обновляем название класса и размер текста для правильного отображения.  

• Разделяем текст на предложения с помощью символа точки.  

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

• Создаем новый хук состояния для отображения всех предложений.  

• Сопоставляем массив предложений для точечного отображения текста.  

• Указываем ключ для идентификации каждого текстового элемента.  

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

• Добавляем экран медитации в каталог вкладок.  

• Обновляем файл макета для отображения экрана медитации.  

• Используем маршрутизатор для перехода на новый компонент при нажатии на элемент.  

• Импортируем изображения для медитации из каталога ресурсов.  

• Используем первое изображение из массива в качестве фона.  

• Настраиваем режим изменения размера и добавляем текст "тест".  

• Добавляем кнопку "Назад" с использованием векторных значков Expo.  

• Настраиваем размер и цвет кнопки.  

• Создаем папку "meditate" и переименовываем файл в "meditate.tsx".  

• Обновляем файл макета для отображения вкладок "медитация" и "аффирмации".  

• Используем параметры локального поиска для выбора изображения по идентификатору.  

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

• Добавляем вид с именем класса "flex one" и выравниваем по центру.  

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

• Добавляем контейнер для кнопок запуска медитации.  

• Используем пользовательскую кнопку с обработчиком событий onpress.  

• Используем состояние для отображения оставшихся секунд.  

• Применяем крючок useEffect для запуска таймера обратного отсчета.  

• Обновляем размер текста для отображения однозначных и двузначных цифр.  

• Используем функцию useEffect для отображения шрифта в зависимости от его доступности.  

• Предотвращение автоматического скрытия заставки до загрузки всех шрифтов.  

• Возвращение значения null, если шрифты не загружены.  

• Использование шрифта в текстовом компоненте с помощью Tailwind.  

• Форматирование оставшегося времени для отображения двух цифр.  

• Создание функции для переключения статуса сеанса медитации.  

• Установка продолжительности медитации при достижении нуля секунд.  

• Определение переменной состояния для звука и его инициализация.  

• Импорт библиотеки Expo Audio.  

• Инициализация звука и создание структуры звука.  

• Создание функции для переключения воспроизведения и паузы звука.  

• Добавление переменной состояния для определения воспроизведения звука.  

• Использование функции переключения звука в функции переключения статуса сеанса медитации.  

• Реализация кнопки "Назад" для остановки воспроизведения звука.  

• Добавление кнопки для настройки продолжительности медитации.  

• Создание модального компонента для настройки продолжительности.  

• Определение метода для регулировки продолжительности медитации.  

• Добавляем ссылку на функцию восстановления.  

• Определяем градиент приложения и применяем цвета.  

• Создаем массив строк для градиента.  

• Добавляем кнопку "Назад" для закрытия модального раздела.  

• Импортируем и настраиваем кнопку.  

• Добавляем вид для отображения изменений.  

• Определяем текст и стили для текста.  

• Создаем пользовательский компонент кнопок.  

• Определяем реквизиты и стили для кнопок.  

• Создаем несколько копий кнопки.  

• Обновляем и добавляем функцию для ручного нажатия.  

• Определяем длительность медитации.  

• Создаем контекст для управления состоянием.  

• Определяем интерфейс и экспортируем контекст.  

• Устанавливаем длительность и обновляем состояние.  

• Экспортируем поставщика контекста.  

• Используем контекст в корневом макете.  

• Устанавливаем длительность в компоненте.  

• Используем контекст для установки длительности.  

• Обновляем значение оставшихся секунд.  

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

• Условно отображаем текст "начать медитацию" или "стоп".  

• Проверяем работу условного отображения.  

• Обновляем хук useEffect для заданной продолжительности.  

• Обновляем хук useEffect для заданной продолжительности.  

• Призываем подписаться на канал и поддержать курсы.  

• Рекомендация приложения для планирования тренировок и приема пищи.