Question

我是本机反应的新手，因此能提供任何帮助！

我创建了一个主题管理器，其中维护了一个处理程序列表，以刷新应用程序中的所有各种样式，如下所示：

var handlers = [];
export const registerStyle = (fnHandler) => {
  if (!handlers.find(fnHandler)) {
    console.log('refreshHandler:', fnHandler);
    handlers.push(fnHandler);
  }
}

export const refreshStyles = () => {
  handlers.forEach(fn => fn());
}

并具有更改整个应用程序中使用的背景颜色并通知应用程序中的各种样式表以在颜色更改后重新计算其样式的功能：

const checkDarkMode = colorScheme => {
  if (colorScheme === 'dark') {
    console.log("DARK-MODE");
    AppColors.background = '#aaaaaa';
    refreshStyles();
  }
}

  Appearance.addChangeListener(({ colorScheme }) => {
    console.log("COLOR-SCHEME:", colorScheme);
    checkDarkMode(colorScheme);
  });

const appStyles = () => {
.
.
.
 tableText: {
      paddingHorizontal: 8,
      paddingVertical: 4,
      backgroundColor: AppColors.background,
      color: AppColors.primary,
      fontSize: 20
    }
  });
}

var AppStyles = appStyles()
registerStyle(() => { 
  AppStyles = appStyles();
  console.log('TABLE-TEXT:', AppStyles.tableText);
});

export default AppStyles;

这是我在控制台日志中得到的：

AppStyles background color #e0d8ee
refreshHandler: [Function anonymous]
RootScreen-appStyles
RootScreen-appStyles
refreshHandler: [Function anonymous]
Running application on JDoe's iPhone.
AppStateListener initial COLOR-SCHEME: no-preference
DARK-MODE
AppStyles background color #aaaaaa
TABLE-TEXT: Object {
  "backgroundColor": "#aaaaaa",
  "color": "#4f73b0",
  "fontSize": 20,
  "paddingHorizontal": 8,
  "paddingVertical": 4,
}
RootScreen-appStyles

更改样式后，我使用TABLE-TEXT样式在组件中添加了一条日志消息，在控制台日志中添加了一条日志消息：

Root TABLE-TEXT: Object {
  "backgroundColor": "#e0d8ee",
  "color": "#4f73b0",
  "fontSize": 20,
  "paddingHorizontal": 8,
  "paddingVertical": 4,
}

背景颜色仍然是原始颜色。问题是为什么组件具有原始颜色？我假设控制台日志反映了程序流程。

尝试支持黑暗模式而不传播主题==='黑暗'吗？ 'black'：到处都是'white'

0 个答案: