reactjs - 使用 native-base 即时更改主题

标签 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 渲染方法中的控制台日志,它正在重新渲染并且主题正在切换到样式提供程序中。应用程序中的其余组件成功实现了原生基础,它们使用当前主题,但仅在应用程序刷新后切换。我还确保它们都在状态更改时重新渲染,但主题保持不变

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

编辑:我正在使用 redux,我所有的组件都在状态变化时重新渲染,但奇怪的是只有一些主题在变化

最佳答案

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

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

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

在我的 app.js 中

已添加 从'native-base-shoutem-theme'导入{clearThemeCache};

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

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

关于reactjs - 使用 native-base 即时更改主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56840678/

相关文章:

reactjs - 在 IIS 10 上创建 React 应用程序

Redux:将派生数据保存在商店中总是不好的做法吗?

javascript - 在导出期间将组件连接到 redux 和多个库

javascript - 无法读取未定义的属性 'routeName' - react 抽屉导航

reactjs - React Native - 库更新后我应该重新链接吗?

reactjs - this.props.history.push() 似乎不再在 React Router v4 中工作,有什么替代方案吗?

reactjs - react native ,Redux : Fetch more/Load more

react-native - Fetch api 在 native react 中不起作用

react-native - tabBarOnPress 在 React Navigation v5 中不可用

ajax - 如何通过 Redux 触发 AJAX 调用以响应状态变化?