借助原生平台快速更改主题

时间:2019-07-01 18:27:56

标签: reactjs react-native redux themes native-base

我正在尝试在应用程序中实现深色主题。目前,有人告诉我要使用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,我的所有组件都在状态更改时重新呈现,但奇怪的是,只有某些主题在更改

1 个答案:

答案 0 :(得分:0)

我最终如何修复它(有点):

Ran npm i-保存git + https://github.com/GeekyAnts/theme

因为主题的npm版本没有clearThemeCache(),所以必须这样做

在我的app.js中

已添加 struct Widget { virtual ~Widget(); virtual void print(); };

print到在黑暗主题更改时更新组件状态的方法

从这里开始,我必须在黑暗主题切换时重新渲染整个应用程序中的每个组件,因为某些nativebase组件并未在黑暗主题更改时重新渲染