0

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

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

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

4

1 回答 1

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>
于 2021-07-25T13:55:40.323 回答