К настоящему времени я уверен, что вы заметили последнюю тенденцию, которая штурмом захватила мир приложений: многие из компаний, которые мы знаем и любим, включая Slack, Instagram, Medium и многие другие, теперь предлагают пользователям возможность переключаться к темной цветовой теме. И Apple, и Google добавили ту же функцию в свои операционные системы.
Итак, если вы когда-нибудь хотели реализовать цветовые режимы в своем приложении React Native, это руководство покажет вам один способ достижения этой цели.
Подготовка к настройке
Первое, что нам нужно сделать, это настроить нашу тему. В нашем объекте темы мы вложим объект режимов внутрь объекта цветов. Здесь важно отметить, что объект dark имеет ту же форму, что и цвета, определенные над ним.
Нам также нужно будет экспортировать наш режим (ы) как массив строк, чтобы мы могли их перебирать. Вы можете заметить, что у нас также нет light режима; это потому, что мы автоматически назначаем цвета верхнего уровня default режиму. Поскольку у нас нет объекта режима по умолчанию для прямой ссылки, нам нужно вручную добавить его в начале, используя unshift. Теперь ваш объект темы должен выглядеть примерно так:
Настройка контекста
Затем, если вы еще этого не сделали, вам нужно поместить свое приложение в ThemeProvider из styled-components.
Теперь, когда наше приложение может получить доступ к нашей теме, нам нужно настроить нашего собственного поставщика контекста для обработки логики переключения между темами и запоминания предпочтений пользователя:
Здесь не происходит ничего особенного. Мы просто создаем поставщик контекста, который принимает два реквизита: mode и toggleMode. Затем мы присваиваем mode значение по умолчанию.
Мы также экспортируем настраиваемую ловушку под названием useAppContext, которая предназначена исключительно для удобства, чтобы мы могли получить доступ к контексту нашего поставщика приложений без необходимости каждый раз ссылаться на React.useContext(AppContext).
Переключение режимов
Как мы видим выше, наш компонент AppProvider принимает два реквизита, mode и toggleMode - мы определим их ниже в нашем файле App.tsx.
Итак, теперь мы можем циклически перемещаться по нашему массиву режимов, который мы создали ранее, и устанавливать это значение в состояние.
Следующее, что нам нужно сделать, это динамически обновить наш объект темы на основе текущего активного режима. Мы можем добиться этого с помощью некоторых вспомогательных функций из Lodash:
Что замечательно в этой технике, так это то, что вместо управления двумя отдельными объектами темной / светлой темы вы можете добавить столько цветовых режимов, сколько захотите, и она просто переключает их, когда вы нажимаете toggleMode.
Пример:
Мы почти закончили настройку логики для переключения нашей цветовой схемы. Все, что нам еще нужно сделать, это установить для пользователя предпочтение Async Storage, чтобы в следующий раз, когда пользователь откроет приложение, он запомнит предпочтительный цветовой режим:
В том же файле App.tsx, где находится наша toggleMode функция, мы добавляем два useEffect перехватчика.
Первый запускается при монтировании (обратите внимание на пустой массив зависимостей) и отвечает за выборку пользовательских предпочтений из AsyncStorage и установку их в состояние.
Другой - для установки нового режима AsyncStorage при каждом его обновлении. Что касается утилиты colorModeStorage, это просто объект, содержащий некоторые функции установки / получения:
Теперь, когда мы все настроены, последнее, что нам нужно сделать, это добавить кнопку / переключатель в наше приложение, которое мы будем использовать для циклического переключения режимов. Однако как вы это сделаете, зависит от вас и выходит за рамки данного руководства.
Чтобы убедиться, что все ваши компоненты хорошо реагируют при переключении цветовых режимов, обязательно всегда используйте цвета из вашей темы. И поскольку мы используем систему стилей, вы должны ссылаться на цвета из своей темы следующим образом:
<Box bg="primary" />
Вот и все. Вы можете увидеть полный файл App.tsx ниже:
Кстати, если вы используете react-navigation в своем приложении (что, я уверен, большинство из вас использует), вы могли заметить, что по умолчанию любые используемые вами компоненты, такие как Tabs и т. Д., Автоматически не работают. переключать цветовые режимы.
К счастью, react-navigation поддерживает тематику - вам просто нужно указать своему навигатору, какую тему использовать. Сделать это можно так:
И все готово.
Ресурсы
Большое спасибо Бренту Джексону, который создал styled-system за его руководство по цветовым режимам.
Эта статья была адаптацией его руководства для использования в приложениях React Native.
