Дизайн-система в RN-приложении
Вопрос
Как вы построите набор переиспользуемых компонентов и тем для большого RN-приложения?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Токены: цвета, отступы, радиусы, типографика в одном месте
Базовые компоненты: `AppText`, `Button`, `Input` поверх примитивов с вариантами
Тема через контекст или библиотеку (Unistyles, Restyle, Tamagui), без инлайновых стилей
Доступность: роли, подписи, размер области нажатия, масштаб шрифта
Платформенные отличия внутри компонентов, а не в экранах
Каталог компонентов (Storybook) и визуальные тесты
Что могут спросить следом
- Как поддержать увеличенный системный шрифт?
- Как избежать перерисовок при смене темы?
Разбор
Образцовый ответ: «Начинаю с токенов: цвета, отступы, радиусы, шрифтовые стили, всё в одном модуле. Поверх примитивов делаю базовые компоненты: AppText с вариантами типографики, Button, Input, Card. В экранах никто не пишет цвета и размеры руками. Тему передаю через контекст или библиотеку вроде Unistyles, которая не перерисовывает всё дерево при смене темы. В базовые компоненты встраиваю доступность: роли, подписи, hitSlop не меньше 44 точек, поддержку масштаба шрифта без фиксированных высот. Платформенные различия, вроде теней и риппла на Android, прячу внутрь компонентов. Компоненты живут в Storybook, а для ключевых есть снимочные или визуальные тесты»
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.