Блог

Главная - Вопросы по программированию - Отдача DarkMosw

Отдача DarkMosw

#reactjs #react-native #recoiljs

Вопрос:

у меня есть вопрос по поводу отдачи. В моем приложении есть несколько экранов. Существует множество текстовых компонентов. Сейчас я работаю в темном режиме и стараюсь использовать для этого отдачу. У меня есть atom isDarkMode, который может быть ложным или истинным. Есть одна проблема. Необходимо ли проверять каждый текстовый компонент( у меня около 50 для всего приложения) в style => {isDarkMode ? Темные стили: светлые стили}. Во всех текстовых компонентах мне нужен один и тот же стиль в темном режиме… Теперь я просто повторяю это в каждом текстовом компоненте. Есть ли способ справиться с этим более разумным способом, чтобы избежать повторения? Я имею в виду, например, передать эти стили от родителя или что-то в этом роде? или мне просто нужно делать то, что я делаю сейчас?

У меня есть переключатель в настройках, поэтому, если этот переключатель верен, я хочу темный режим, если ложь, я хочу светлый режим. Итак, есть ли другой метод, кроме проверки того, является ли это состояние переключателя истинным или ложным в каждом текстовом компоненте? Теперь у меня есть что-то вроде этого

 <Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text</Text>
<Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> Some text </Text>

и т.д. и множество других текстовых файлов на нескольких экранах
, если я смогу управлять всеми текстами одновременно? Я имею в виду, чтобы не писать это «{isDarkMode ? Темные стили: светлые стили}» в каждом сост. Если нет, то, возможно, каким-то образом можно сократить это положение

Ответ №1:

Вы можете сделать простой многоразовый компонент:

 ...import all the dependencies that you need

export const ThemeDependentText = ({children}) => {
  return (
    <Text style={{isDarkMode ? darkModeStyles: lightModeStyles}}> {children} </Text>
  )
}

а затем вы можете использовать его в любом месте с пользовательским текстом, с условием темы, применяемым к каждому компоненту:

 ...
import { ThemeDependentText } from 'ThemeDependentText'
...

<ThemeDependentText> YAY </ThemeDependentText>
Метки: