@fluentui-react-native/主题

这个包是相容的 shim. 主题框架 ThemeReference 类和 ThemeProvider 执行——现在生活在 @fluentui-react-native/design 并且通过它暴露 @fluentui-react-native/design/theming 子模块。 此套件会再导出它们, 这样现有的 @fluentui-react-native/theme 入口继续工作;新代码应从 @fluentui-react-native/design/theming。 。 。 .

ThemeReference

构造一个 Theme 以另一个完全建成的 Theme 或父母关系 ThemeReference,然后分层 PartialTheme 碎片,或 ThemeTransform 函数。 然后提供无效的能力,更新碎片的能力,以及倾听主题变化的能力.

创建一个 ThemeReference

引用通过结合以零或多处食谱为底来创建.

• 基础 - 要么是一个 Theme 或另一个 ThemeReference
• 食谱 - 要么是一个 PartialTheme 或窗体的函数 (parent: Theme) => PartialTheme

这个 ThemeReference 支持下列方法:

• theme - 获得已建主题, 被执行为在被询问时动态创建的主题
• invalidate() - 让参考文献知道有什么变化, 这将重放曲目 生成一个新的主题
• update(...recipes) - 更新用于构建主题的食谱,也将使引用无效
• addOnThemeChanged(listener) - 增加一个被通知主题变化的听众
• removeOnThemeChanged(listener) - 移除听众

在实践中,这可用于执行一个主题,这个主题具有一些来自外部调用(可能是本地模块)的值,并在这些值变化时重建自己. 这看起来像是:

import { defaultFluentTheme } from '@fluentui-react-native/default-theme';
import { ThemeReference } from '@fluentui-react-native/design/theming';

// in this case wrapping the reference in a function makes it easy to encapsulate the invalidating
export const createMyCustomTheme = () => {
  // create the reference
  const themeRef = new ThemeReference(
    // base it on the default fluent theme
    defaultFluentTheme,
    // mix in some constant values to override
    {
      colors: {
        // stuff here
      },
    },
    // make some outside calls to get some values
    () => {
      // query a body background from somewhere else
      const bodyBackground = checkSomeOutsideValue();
      return {
        colors: {
          bodyBackground,
        },
      };
    },
  );
  // register a change handler that invalidates the reference
  listenForOutsideValueChange(() => {
    themeRef.invalidate();
  });
  return themeRef;
};

ThemeProvider

这是一个标准上下文提供者,将主题引用作为主题道具的投入.