react-native - React Native - 提供全局主题的最佳方式是什么？

Question

我最近开始使用 RN，并且一直在研究主题和/或暗光模式的实现。到目前为止，我对这两个主要选项的大致理解如下:

• 上下文:设置简单，可以通过需要它的组件内部的钩子(Hook)访问。我数了 React Navigation 主题之类的东西，因为它本质上以相同的方式工作(？)
• 样式化组件:本质上只是将组件替换为访问当前主题的自定义组件，然后可以设置这些组件以在需要时更改它们在切换时的 Prop 。

关于上下文，我不喜欢的是(按我的理解)它不允许我在使用样式表时访问主题，因为它在组件之外。另一方面，对于带样式的组件，我不确定我是否可以在我的自定义组件中涵盖所有选项，我是否仍然需要在每个组件中使用某种 Hook ？

我还考虑将当前主题保存到我的商店(在我的例子中是 Zustand)，以及一个让我切换到暗模式的操作。但到目前为止，我还没有真正看到其他人这样做，这样做有什么缺点吗？

Answer 1

将上下文传递给样式表并不难，只是需要一些额外的样板文件。类似下面的内容:

import ThemeContext from '<path>';

export default () => {
  const theme = useContext(ThemeContext);
  const stylesWithTheme = styles(theme);

  return <Text style={stylesWithTheme.text>Hi</Text>;
}

const styles = theme => StyleSheet.create({
  text: {
    color: themeStyles.color[theme];
  }
});

const themeStyles = {
  color: {
    dark: '#FFF',
    light: '#000',
  },
};

我不认为使用样式化组件会与上述方案有很大的不同。

如果您确实将主题存储在状态中，并在组件主体中定义样式，则可以节省样板文件。是否可以接受在组件主体中使用您的样式取决于您。

旁注，如果您已经在使用状态管理器，我建议您不要在不了解更多信息的情况下将其与 Context API 混合使用。那里有一个解决方案更简单。