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

Question

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

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

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

我也在考虑将当前主题保存到我的商店（在我的例子中是 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',
  },
};

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

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

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

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

React Native - What's the best way to provide a global theme?

themes

react-native