后坐力

问题描述

我有一个关于后坐力的问题。在我的应用程序中有几个屏幕。有很多文本组件。我现在正在使用黑暗模式，我尝试为此使用后坐力。我有原子 isDarkMode，它可以是假的，也可以是真的。有一个问题。需要在 style => {isDarkMode 中检查每个 Text 组件（我有大约 50 个所有应用程序）？ darkModeStyles：lightmodeStyles}。在所有文本组件中，我需要在黑暗模式中具有相同的样式......现在我只是在每个文本组件中重复这一点。是否有办法以更智能的方式管理它，以避免重复？ 我的意思是像从父母那里传递这种风格或类似的东西？还是我只需要像现在一样做？

我有设置开关，所以如果这个开关是真的我想要暗模式，如果假我想要亮模式。那么是否有其他方法而不是检查每个文本组件中此开关状态是真还是假？现在我有这样的东西

<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 ? darkModeStyles: lightmodeStyles}”。如果没有，也许可以通过某种方式缩短此条款

解决方法

你可以制作一个简单的可重用组件：

...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>