# Дизайн-система React Native Elements ## React Native Elements Предпросмотр интерфейса дизайн-системы Измените задачу, длительность и вариант перерыва; проверьте валидацию, оформление и сброс. ## React Native Elements Справочник по дизайн-системе Настройки по умолчанию из закреплённой версии RNEUI, публичные API компонентов и явно обозначенные решения приложения. ### Цвета светлой темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | lightColors.primary | #2089dc | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.secondary | #ad1457 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.background | #ffffff | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.black | #242424 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.white | #ffffff | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.grey1 | #43484d | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.grey2 | #5e6977 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.grey5 | #e1e8ee | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.success | #52c41a | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.error | #ff190c | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | lightColors.warning | #faad14 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | ### Цвета тёмной темы | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | darkColors.primary | #439ce0 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.secondary | #aa49eb | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.background | #080808 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.black | #f2f2f2 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.white | #080808 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.grey1 | #bdc6cf | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.grey2 | #86939e | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.grey5 | #393e42 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.success | #439946 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.error | #bf2c24 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | | darkColors.warning | #cfbe27 | Фактическое значение темы RNEUI. В тёмном режиме визуальное значение ролей black и white меняется на противоположное; используйте активную тему, а не жёстко заданные литеральные цвета. | ### Интервалы по умолчанию и явные решения приложения | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | spacing.xs | 2 | Опубликованная запись интервалов по умолчанию; эти имена образуют объект темы, а не токены переменных CSS. | | spacing.sm | 4 | Опубликованная запись интервалов по умолчанию; эти имена образуют объект темы, а не токены переменных CSS. | | spacing.md | 8 | Опубликованная запись интервалов по умолчанию; эти имена образуют объект темы, а не токены переменных CSS. | | spacing.lg | 12 | Опубликованная запись интервалов по умолчанию; эти имена образуют объект темы, а не токены переменных CSS. | | spacing.xl | 24 | Опубликованная запись интервалов по умолчанию; эти имена образуют объект темы, а не токены переменных CSS. | | Sample heading | 32px / weight 700 | Оригинальное решение примера, явно заданное в предоставленном исходном коде, а не официальный глобальный тип или токен радиуса. | | Sample body | 15px / 23px line height | Оригинальное решение примера, явно заданное в предоставленном исходном коде, а не официальный глобальный тип или токен радиуса. | | Sample cards | 24px padding / 8px radius | Оригинальное решение примера, явно заданное в предоставленном исходном коде, а не официальный глобальный тип или токен радиуса. | | Button component default | radius: 6 | Оригинальное решение примера, явно заданное в предоставленном исходном коде, а не официальный глобальный тип или токен радиуса. | ### Контракты компонентов и провайдера | Название / правило | Значение / конфигурация | Применение | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProvider получает сформированный объект; настройки по умолчанию сохраняются, если меняются только компоненты. | | useTheme | theme, updateTheme | Действие смены оформления переключает режим, не сбрасывая состояние приложения. | | Input | value, onChangeText, errorMessage, ref | Ошибка пустой задачи отображается, а фокус возвращается к соответствующему полю ввода. | | ButtonGroup | buttons, selectedIndex, onPress | Управляемый индекс выбирает 15, 25 или 45 минут; он не задаёт длительность напрямую. | | Switch | value, onValueChange | Управляемое логическое значение меняет описание перерыва. | | Card | Card.Title, Card.Divider | Структурированные поверхности наследуют выбранную тему. | | Button | title, onPress, type | Действие сохранения проверяет локальное состояние; сброс восстанавливает значения по умолчанию. | | SafeAreaProvider | Outer application provider | Необходимый контекст интеграции; успешная работа в вебе не подтверждает корректное поведение безопасных областей на нативных устройствах. | ## React Native Elements Полное руководство по дизайн-системе Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса. Подробные рекомендации, отправная точка для реализации и ссылки на источники. ## Дизайн-система React Native Elements Среда выполнения и поддержка веб-платформы ### Запустите компоненты с реальной темой > В этом примере используются @rneui/themed и @rneui/base версии 5.0.0, React 19.2.0 и React Native Web 0.21.3. При сборке для браузера react-native заменяется на react-native-web, а модули .web.js выбираются раньше общих JavaScript. Это настоящие компоненты библиотеки, отображаемые в вебе, а не HTML-блоки, имитирующие скриншот мобильного приложения. В предоставленный файл сборки включён этот вариант разрешения модулей, поэтому автономный код воспроизводит предпросмотр. ### Разделяйте данные для веба и нативных платформ Здесь показан редактор плана концентрации, а не работающий таймер или менеджер уведомлений. SafeAreaProvider оборачивает приложение, как того требует интеграция, но этот браузерный тест не проверяет отступы iOS и Android, работу нативной клавиатуры или разрешения устройства на отправку уведомлений. Для нативного проекта помимо общих примеров компонентов нужны сборка под соответствующую платформу и проверки на устройстве. - Веб-отображение работает на React Native Web. - План хранится только в локальном состоянии React. - Таймер, системное уведомление или сохранение на сервере не запускаются. ## React Native Elements Объекты темы и цвета дизайн-системы ### Используйте роли активной темы createTheme объединяет встроенные цвета светлой и тёмной тем с любыми явными переопределениями. В примере меняются только настройки компонентов по умолчанию и режим. useTheme предоставляет окружающим элементам View и Text актуальные цвета, поэтому заголовок, описания и панели соответствуют выбранному оформлению. В тёмном режиме black обозначает светлую роль переднего плана, а white — тёмную роль поверхности; если считать эти имена буквальными значениями цветов, тема будет отображаться неправильно. ### Не придумывайте универсальную шкалу типографики RNEUI предоставляет настройки компонентов по умолчанию и средства настройки, а не ту же модель токенов, что и дизайн-система CSS. Поэтому в справочнике отдельно указаны реальные записи defaultSpacing и размеры из примера: заголовок 32px, основной текст 15px и радиус карточки 8px. Эти значения — оригинальные параметры композиции, заданные в коде. Их не следует описывать как обязательные фирменные правила React Native Elements. ## React Native Elements Проверка ввода и управление фокусом в дизайн-системе ### Явно управляйте текстом задачи Для Input задаются value и обратный вызов onChangeText. Перед проверкой на пустое значение действие сохранения удаляет пробелы в начале и конце текста. Если поле пустое, errorMessage показывает понятное сообщение, а ссылка на компонент возвращает фокус в поле ввода. При изменении текста прежняя ошибка сбрасывается, а локальное подтверждение становится недействительным, чтобы сообщение о сохранении не относилось к уже изменённому плану. ### Используйте подпись вместе с сообщением об ошибке Видимая подпись Focus task и accessibilityLabel называют один и тот же элемент управления. Заполнитель подсказывает, что ввести, но не заменяет подпись. Проверка запускается явным действием сохранения, а не при каждом нажатии клавиши. После ошибки черновик остаётся у пользователя; анимация асинхронного сохранения не должна создавать впечатление запроса к несуществующему серверу. ## React Native Elements Управляемый выбор в дизайн-системе ### Отделяйте выбранный индекс от длительности Для ButtonGroup задаются три подписи, selectedIndex и onPress. Возвращаемый индекс выбирает значение из исходного списка минут [15, 25, 45]; если использовать этот индекс непосредственно как количество минут, это приведёт к ошибке в приложении. Крупное числовое значение в предпросмотре вычисляется по тому же выбранному индексу, поэтому сегментированный переключатель и понятное пользователю описание плана всегда согласованы. ### Сделайте выбор перерыва полноценным логическим значением Switch получает значение и onValueChange, а также доступное имя, описывающее настройку. В сводке отображается краткое напоминание о перерыве или отсутствие такого напоминания. Это только настройка плана: интерфейс не регистрирует системное напоминание и не планирует уведомление. В тексте подтверждения сохранения повторно указывается, что настройка действует только локально. ## React Native Elements Сохранение и сброс состояния дизайн-системы ### Не связывайте тему с планом При смене оформления вызывается updateTheme с противоположным режимом. Задача, выбранная длительность, настройка перерыва и локальное подтверждение остаются состоянием приложения и не затрагиваются этим обновлением. Нативные компоненты получают новую тему без повторного создания плана. В проверке браузера оформление меняется после ввода пользовательской задачи, чтобы убедиться, что визуальный режим не связан случайно со сбросом данных. ### Используйте одно явное действие восстановления Сброс плана восстанавливает пример задачи, длительность 25 минут и включённую настройку перерыва, очищает ошибку проверки и удаляет подтверждение. Выбранное оформление сохраняется. Так сброс содержимого отделяется от настройки темы и не вызывает неожиданную перезагрузку страницы. В примере нет слоя хранения, поэтому при повторном открытии документа отображается исходный пример. ## React Native Elements Адаптивная компоновка дизайн-системы ### Адаптируйте расположение двух карточек Для выбора горизонтального расположения при ширине более 700px и вертикального при меньшей ширине используется useWindowDimensions. Внешние отступы каждой Card равны нулю, поэтому расположение выравнивается за счёт промежутка 24px. При ширине менее 500px внешние поля уменьшаются до 16px. В двух карточках представлены редактируемый план и производная сводка, а не повторяющиеся декоративные заполнители. ### Проверьте стандартные настройки компонентов в обеих темах Внутренние компоненты RNEUI могут использовать собственные стандартные стили в дополнение к глобальным цветам. Например, в этом примере для невыбранных сегментов ButtonGroup сохраняется стандартное оформление поверхности. Если продукту нужны другие контрастность или визуальная плотность, можно явно задать buttonStyle и selectedButtonStyle, но это решение следует проверить, а не считать результатом автоматического применения глобальной темы. ## React Native Elements Полная настройка дизайн-системы для браузера ### Добавьте настройки для веб-сборки и загрузчики ресурсов В предоставленном build.mjs используется esbuild с разбором JSX для зависимостей JavaScript, подстановкой react-native-web, приоритетом .web.js и загрузчиками data для PNG- и TTF-ресурсов пакетов. Точка входа пакета содержит экспорты, ссылающиеся на эти ресурсы, даже если в видимой композиции нет значков. Поэтому сборку нельзя заменить обычным подключением необработанного исходного кода в браузере. ### Проверьте все локальные взаимодействия Сохраните предоставленный исходный код как rne.jsx, а HTML — как index.html, установите зафиксированные версии пакетов, выполните сборку и запустите сервер для этой директории. Проверьте пустую задачу, пользовательскую задачу, другую длительность, переключатель перерыва, оформление и сброс. Это позволяет проверить предоставленную композицию, но не означает автоматической проверки каждого экспортируемого компонента RNEUI или каждой нативной платформы. 1. Храните все три предоставленных файла в одной директории. 2. Установите зафиксированные зависимости и выполните node build.mjs. 3. Раздавайте собранный пакет через index.html. 4. Проверьте пустое, изменённое, оформленное темой и сброшенное состояния. ## React Native Elements Примеры компонентов дизайн-системы ### rne.jsx Полная настройка провайдера, нативных компонентов и состояния приложения. ``` import React,{useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {View,Text,useWindowDimensions} from 'react-native'; import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed'; import {SafeAreaProvider} from 'react-native-safe-area-context'; const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}}); function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing