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

Question

我最近开始使用 RN，并一直在对主题和/或暗光模式的实现进行一些研究。到目前为止，我大致了解两个主要选项：

• 上下文：设置简单，可以通过需要它的组件内的钩子进行访问。我计算了像 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',
  },
};

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

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

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