使用 native-base 即时更改主题

Question

我正在尝试在应用中实现深色主题。我目前被告知使用 native-base 来实现它。我可以成功切换主题，但需要重新加载应用程序才能生效。

我对主题更改的逻辑是在应用程序级别如此

<StyleProvider style={ getTheme(this.state.theme === 'light' ? platform : darkplatform) }>

像这样重新渲染时，主题在模块级状态中被更改

    console.log(`darkTheme enabled? ${isDarkThemeEnabled}`);
    if (isDarkThemeEnabled && this.state.theme === 'light') {
      this.setState(() => ({
        theme: 'dark',
      }));
    } else if (!isDarkThemeEnabled && this.state.theme === 'dark') {
      this.setState(() => ({
        theme: 'light',
      }));
    }
  };

我知道这不是理想的逻辑，但根据我放在 app.js 渲染方法中的控制台日志，它正在重新渲染并且主题正在样式提供程序中打开切换。应用程序中的其余组件成功实现了原生基础，它们使用当前主题，但仅在应用程序刷新后切换。我还确保它们都在状态更改时重新渲染，但主题保持不变

更新：一些组件会即时更改，但不是全部。这有什么原因吗？好像是随机的，我的一些视图标签在变化，但不是全部，甚至不是所有都在同一个组件中

编辑：我正在使用 redux，我的所有组件都在状态更改时重新呈现，但奇怪的是只有一些主题在更改

Answer 1

我最终是如何修复它的（有点）：

运行 npm i --save git+https://github.com/GeekyAnts/theme

不得不这样做，因为 npm 版本的主题没有 clearThemeCache();

在我的 app.js

已添加 import { clearThemeCache } from 'native-base-shoutem-theme';

和 clearThemeCache(); 到在深色主题更改时更新组件状态的方法

从这里我不得不 re-render 整个应用程序中的每个组件都在深色主题切换上，因为一些 nativebase 组件在深色主题更改时没有重新渲染

使用 native-base 即时更改主题

Changing theme on the fly with native-base

themes

reactjs

react-native

redux

native-base