maxpfrontend

Пишем музыкальное стриминговое приложение на React Native

React Native — это фреймворк для написания нативных приложений на React и Javascript. В этой статье я покажу процесс создания музыкального стримингового приложения похожего на Spotify. Что действительно здорово — это что тот же самый код будет работать и на iOS, и на Android, и приложение будет на 100% нативным (без WebView и подобных инструментов).

Напишем код для отображения экрана с текущей проигрываемой песней, который выглядит так на Spotify:

Поскольку я не дизайнер, и мне очень нравится простой чистый дизайн Spotify, мы будем ориентироваться на него для создания нашего проигрывателя. Я открыл снимок экрана в Keynote и добавил линейки по всему изображению, чтобы точно измерить позиции, поля, размеры шрифта и т.д., для всех различных элементов пользовательского интерфейса. Мы будем использовать эти измерения для стилизации нашего UI.

Теперь у нас есть (украденный) дизайн и мы готовы писать код. Давайте создадим новый React Native проект. Откройте терминал и наберите следующие команды:

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

Откройте index.ios.js и index.android.js. Вы заметите, что в них одинаковый код. Мы избавимся от него и начнем с нуля. Давайте создадим директорию app внутри корневой директории проекта. Теперь создадим app/App.js со следующим кодом:

Теперь мы можем удалить весь код из index.ios.js и index.android.js и просто включить компонент App в оба из них:

Если вы перезагрузите эмуляторы (Cmd+R для iOS и Fn+F2 для Android), вы должны будете увидеть черный экран с белым текстом на нем. Вы также можете установить в эмуляторах Live Reloading, чтобы приложение автоматически обновлялось при каждом сохранении измененного файла.

Если мы вернемся назад и еще раз взглянем на пользовательский интерфейс, то мы увидим, что он состоит из 5 основных частей:

Мы создадим отдельные компоненты для каждой из этих частей, начиная с Header, который состоит из заголовка и двух кнопок. Мы будем использовать TouchableOpacity для представления кнопок. Создадим директорию ‘img’ в корневой директории проекта для хранения иконок и изображений. Вы можете взять иконки для заголовка в коллекции Google Material Icons. Скачайте иконки ‘keyboard arrow down’ и ‘queue music’ и скопируйте файлы из набора иконок для ‘ios’ в директорию ‘img’. Вы можете узнать больше об отображении изображений и иконок здесь.

Вот код для Header :

Полный код

Я убрал импорты и стили для краткости.
Для получения полного кода перейдите по ссылке выше. Вы можете поместить этот код в app/Header.js, а затем импортировать и использовать компонент Header в app/App.js :

Затем у нас есть простой компонент для отображения картинки альбома:

Полный код.

Далее, у нас есть название записи и исполнитель:

Полный код.

Мы будем использовать react-native-slider для Seek Bar, у которого лучшие кросс-платформенные настройки стилей:

Теперь мы можем создать Seek Bar :

Полный код

Также добавим компонент для управления :

Полный код.

Наконец мы можем собрать все эти stateless компоненты в App.js для проверки пользовательского интерфейса и поиграться с ними:

Для сравнения вот анимация разницы между Spotify и нашим приложением:

Неплохо, да? Для реального воспроизведения аудио мы будем использовать react-native-video. Здесь показано, как это делается: