Создайте приложение AudioBook в React Native, используя Styled Components

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

Дизайн аудиокниги был создан Давид Фелипе V и изначально разветвлен от кодер41

Что такое стилизованный компонент?

В React Native объекты Javascript используются для создания стилей, что является сложной задачей, запутанной и очень трудной для понимания новичками. Styled-components позволяет вам писать фактический код CSS для стилизации ваших компонентов.

Styled-components позволяет вам писать реальный CSS в вашем JavaScript. Это означает, что вы можете использовать все функции CSS, которые вы используете и любите, включая (но не ограничиваясь ими) медиа-запросы, все псевдоселекторы, вложенность и т. д.

Компонент стиля удаляет сопоставление между компонентами и стилями. Это означает, что когда вы определяете свои стили, вы фактически создаете обычный компонент React, к которому привязаны ваши стили.

Преимущества использования Styled Component по сравнению со стилем на основе объектов Javascript

Автоматический критический CSS: styled-components отслеживает, какие компоненты отображаются на странице, и полностью автоматически внедряет их стили и ничего больше. В сочетании с разделением кода это означает, что ваши пользователи загружают наименьшее количество необходимого кода.

Нет ошибок имени класса: styled-components генерирует уникальные имена классов для ваших стилей. Вам никогда не придется беспокоиться о дублировании, перекрытии или орфографических ошибках.

Более простое удаление CSS: может быть трудно узнать, используется ли имя класса где-то в вашей кодовой базе. styled-components делает это очевидным, так как каждый элемент стиля привязан к определенному компоненту. Если компонент не используется (что может обнаружить инструментарий) и удаляется, все его стили удаляются вместе с ним.

Простой динамический стиль: Адаптация стиля компонента на основе его свойств или глобальной темы проста и интуитивно понятна без необходимости вручную управлять десятками классов.

Безболезненное обслуживание: вам никогда не придется рыться в разных файлах, чтобы найти стили, влияющие на ваш компонент, поэтому обслуживание — это пустяк, независимо от того, насколько велика ваша кодовая база.

Автоматический префикс поставщика: напишите свой CSS в соответствии с текущим стандартом и позвольте styled-components справиться с остальным.

Я не буду тратить много времени на объяснение того, как использовать компонент стиля, а научу вас, как применять знания для создания потрясающего пользовательского интерфейса.

Что будем строить?

Аудиокнига это приложение, которое позволяет вам транслировать аудиозаписи авторов.
Готовое приложение имеет;
Firebase для аутентификации, хранения и push-уведомлений.
Redux для управления состоянием
Адаптивная раскладка для Ipad, Android и различных раскладок IOS
Но для целей этой статьи мы собираемся использовать фиктивные данные, чтобы сделать учебник простым.

Если вы новичок и никогда не создавали приложения, вам повезло. Прототипировать приложение в наши дни намного проще, чем раньше. С Expo вы можете делать потрясающие вещи за меньшее время. После этой статьи вы сможете добавить проект в свое портфолио.

Начиная
Если вы не установили expo-cli на свой терминал, выполните следующую команду.
npm install -g expo-cli
Инициализировать новый проект
expo init AudioBook
Нажмите клавишу ввода, чтобы выбрать> пустой

Напишите AudioBook для имени и нажмите Enter

Использовать Yarn для установки зависимостей?
Y
После завершения установки пакета
cd AudioBook а также yarn start

Есть 3 способа открыть приложение
1 Нажмите i, чтобы открыть симулятор iOS
2 Нажмите a для Android
3 Отсканируйте QR-код, чтобы открыть его на своем реальном устройстве.

Если установка завершена, поздравляю.

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

Добавление файлов запуска
Теперь, когда мы настроили проект, нам нужно установить зависимости и добавить файлы запуска. Файл запуска экономит время и повышает производительность для реактивных нативных проектов.

Откройте свой проект в редакторе кода

Удалите свой assets папка
Скачать стартап здесь

Копировать assets, components, data, navigation, screens, utils папку в свой проект.

Установите навигацию React и Styled Component

yarn add react-navigation styled-components

После установки зависимостей замените App.js из папки запуска загрузки на свой.
Теперь у вас должно быть это

Экраны — Домашний экран

Стилизованный компонент позволяет использовать CSS и теги для создания собственного и многократно используемого компонента. Это дает разработчику возможность визуализировать каждое используемое атомное пространство и размер.

Заменить HomeScreen.js с
Домашний экран

Далее Замените ImageList.js с
Список изображений

Теперь мы закончили с HomeScreen.

Экран — BookScreen

Заменить BookScreen.js с
КнигаЭкран

Музыкальная функциональность

Музыка

Нажмите на кнопку Play, чтобы воспроизвести музыку

Если вы достигли этого этапа, поздравляю

Вы можете найти готовый исходный код в моем репозитории.

Что мы будем строить дальше?
Мы будем создавать GigStar, приложение для фрилансеров, где каждый может публиковать и находить концерты в среде. Мы будем широко использовать новую базу данных Firebase под названием Cloud Firestore для хранения данных.

Cloud Firestore — это гибкая, масштабируемая база данных для разработки мобильных, веб-приложений и серверов на базе Firebase и Google Cloud Platform. Как и база данных Firebase Realtime, она синхронизирует ваши данные между клиентскими приложениями с помощью прослушивателей в реальном времени и предлагает автономную поддержку для мобильных устройств и Интернета, чтобы вы могли создавать отзывчивые приложения, которые работают независимо от задержки в сети или подключения к Интернету.

С Cloud Firestore вы можете выполнять выразительные запросы, обновления в реальном времени, автономную поддержку и push-уведомления. Я не могу дождаться, чтобы быть сделано.

Наконец, React Native — одна из самых востребованных технологий в 2019 году из-за большой доли мобильного рынка на рынке, поскольку React Native разработчик пишет один раз и строит как на платформе ios, так и на платформе Android.

I offer long term mentorship on my page if you want to learn and build native apps with react native.

Вот чему я учу большую часть своих подопечных.
Основы Javascript
Стилизованные компоненты
Реквизит и значок
Статические данные и циклы
Анимация
Редукс
Сеть
Экраны и навигация
Адаптация под другое устройство
Жесты
База данных Firebase

Спасибо за прочтение 😄 Пожалуйста 👏, если вам понравилась эта статья. Если у вас есть какие-либо вопросы, не стесняйтесь комментировать ниже, и я отвечу как можно скорее!