@fluentui- react-native/组合

此套件包含用于使用该套件创建的所有组件的组件工厂 compose 函数在 @fluentui-react-native/framework我们一般将这称为 compose 框架。 这个框架具有内置功能,可以将一个主题与一个组件合并,使其样式化,并允许使用另外两个功能扩展所创建的组件, customize 财务报告和审定财务报表 compose,可以要求组件创建一个新的组件.

部件厂采用一套选择。 选项对象允许组件的作者定义组件的 插槽,这些槽的道具如何计算,组件的额外状态(如盘旋、按住或选择),组件的状态 符号 及其默认值,以及组件的渲染函数.

自定义

这个 customize API用于修改作为组件一部分的符号. 键 控制组件样式的方面。 每个控件对它的符号有一定的默认值,这些值可能会根据控件的状态而改变. Customize 允许您在默认情况下更改符号的值,或更改组件的特定状态。 组件的每个状态在组件的符号集中都有一个条目,其中包含类型 TTokens 用于设定该状态的符号. Customize 可用于创建相同组件的多个不同的上下覆,从而可以比 使用 components 财产 Theme 对象 来定制您的组件。 这个 customize API 将使用类型参数 TokenSettings<TTokens, TTheme>。 。 。 .

注:不使用此函数在渲染函数内创建组件, 否则定制组件将在每次渲染时被重新创建 .

实例:

import { Theme } from '@fluentui-react-native/framework';

const CustomButton = Button.customize({
  iconSize: 10,
  spacingIconContentBefore: 10,
})

<CustomButton>Button with small icon and large gap between icon and label</CustomButton>

const CustomHoverButton = Button.customize({
  hovered: { backgroundColor: 'pink' },
})

<CustomHoverButton>Button with pink background on hover</CustomButton>

const CustomThemeButton = Button.customize((t: Theme) => ({ tokens: { backgroundColor: t.colors.neutralBackground1 }}));

<CustomHoverButton>Button uses theme entries for customization</CustomButton>

编曲

这个 compose 组件上的 API 用于修改输入到 compose 构建组件的API 。 值得注意的是,这可以用来改变 插槽 用于构建组件槽道具对象的组件或函数,允许组件的单个部分自定义。 还可以允许修改 render 函数,或哪个 states 应用到组件中。 作曲函数使用类型对象 Partial<ComposeFactoryOptions<TProps, TSlotProps, TTokens, TTheme, TStatics>>。 。 。 .

注:不使用此函数在渲染函数内创建组件, 否则每个渲染函数上将重新创建组件 .

实例:

import { Theme, buildProps } from '@fluentui-react-native/framework';

const CustomText = Text.customize({ fontSize: 'header', color: 'hotpink' });
const ComposedButton = Button.compose({
  slots: {
    root: View,
    icon: Icon,
    content: CustomText, // changed the content slot to use large hotpink text component
  },
  slotProps: {
    content: {
      // Change the style prop of the content slot to only style margins, dropping styles from tokens.
      style: { marginTop: -1, marginBottom: 1, marginStart: 0, marginEnd: -2 },
    },
    root: buildProps(
      (tokens: ButtonTokens, _theme: Theme) => ({
        style: {
          backgroundColor: tokens.backgroundColor,
        },
      }),
      ['backgroundColor'], // key used for caching
    ),
  },
});