Это репозиторий, который содержит набор библиотек, реализующие дизайн системы для платформы react-native.
core
- содержит библиотеки, которые являются обязательными зависимостями для работы дизайн системы.docs
- содержит документацию по всем компонентам библиотеки.libraries
- содержит пользовательские библиотеки компонентов.packages
- содержит утилитарные пакеты, необходимые для корректной работы дизайн системы.themes
- содержит пользовательские темы, разбитые на вертикали, сгенерированные на основе файлов из репозитория.scripts
- содержит набор скриптов, которые позволяют переключать режим разработки дл выбранной платформы - mobile или tv.
Содержит библиотеки, которые являются обязательными зависимостями для работы дизайн системы.
Содержит документацию по всем компонент библиотеки core-components
.
Содержит пользовательские библиотеки компонентов.
Содержит утилитарные пакеты, необходимые для корректной работы дизайн системы, а также набор иконок всех размеров.
Содержит пользовательские темы, разбитые на вертикали, сгенерированные на основе файлов из репозитория.
Содержит набор скриптов, которые позволяют переключать режим разработки дл выбранной платформы - mobile или tv.
Для разработки используются инструменты Expo SDK и storybook/react-native.
Есть несколько способов разработки библиотек компонентов для устройств:
- Через веб-приложение
- Через ios симулятор (требуется наличие
xcode
, версии 15 и выше). Подробная инструкция по установке - https://docs.expo.dev/workflow/ios-simulator/ - Через android симулятор (требуется наличие
android studio
). Подробная инструкция по установке - https://docs.expo.dev/workflow/android-studio-emulator/
Файлы package.json
и package-lock.json
в директориях libraries/** и core/core-components не комитятся, поэтому при первом запуске необходимо использовать команду npm run bootstrap:mobile
или npm run bootstrap:tv
в зависимости от выбранной платформы в корне проекта.
Эти команды вызовут скрипты, которые создадут package.json
и package-lock.json
на основе файлов platforms/mobile/package.json
(platforms/tv/package.json
) и platforms/mobile/package-lock.json
(platforms/tv/package-lock.json
).
При дальнейшей разработке можно использовать команду npx lerna bootstrap
как обычно.
Также перед выполнением всех дальнейших команд необходимо выполнить в корне проекта.
$ npm install
Если нужно обновить файл platforms/mobile/package.json
(platforms/tv/package.json
), то необходимо внести все изменения в package.json
как при обычной разработке и вызвать команду в директории с библиотекой компонент (например plasma-b2c)
$ npm run package-update
Либо в корне проекта вызывать (в зависимости от используемой платформы)
$ npm run platform:tv
Если забыли обновить файлы, то при пуше в удаленный репозиторий выполнится pre-push команда, которая автоматически обновит файлы и выведет дифф, если он есть.
Необходимо перейти в нужную директорию с библиотекой компонент (например plasma-b2c)
$ cd ./libraries/plasma-b2c
Для сборки storybook на iPhone / AppleTV необходимо запустить iOS симулятор (через Xcode
) и выполнить команду
$ npm run storybook:ios
Для сборки storybook на Android / AndroidTV необходимо запустить Android симулятор (через Android Studio
) и выполнить команду
$ npm run storybook:android
Если при попытке собрать билды под android и ios возникает ошибка в пакете @react-native-tvos/config-tv. То это из-за того, что в файле withTVAndroidRemoveFlipper в методе mainApplicationFilePath, идёт попытка обратиться к методу sync через поле default модуля glob. Вероятно ошибка связана с версиями nodejs, т.к. если убрать default, то ошибка уйдёт.
Чтобы не делать это каждый раз в ручную, создан path, который это делает автоматически после установки пакетов.
Если возникает ошибка при сборке в файле project.pbxproj
, необходимо удалить -ld_classic либо обновить xcode до версии 15.
Если возникает ошибка из-за отсуствии ресурса по ссылке @color/splashscreen_background
после сборке нужно поменять в splashscreen.xml
<item android:drawable="@color/splashscreen_background"/>
на
<item android:drawable="@android:color/black"/>
Если запустить сторибуке на телевизорах, то секция с доступными сторями не будет отображать компоненты. В этом эту багу не починили (хотя пытались), поэтому нужно в библиотеке @storybook/react-native в файле index.js строку
sectionList: {
flex: 1;
}
поменять на
sectionList: {
height: '100%';
}
Чтобы не делать это каждый раз в ручную, создан path, который это делает автоматически после установки пакетов.
В android нельзя указывать отрицательный отступы, т.к. контент, который выходит за пределы контейнера (в котором рендерится компонент) будет обрезаться: https://reactnative.dev/docs/0.73/style#known-issues
Есть возникают какие-то не описанные здесь ошибки, можно выполнить команду в директории библиотеки компонент, которая полностью пересоберёт проекты для android и ios.
$ npm run storybook:tv-prebuild