预定义组件

此库附带预定义函数来创建 Box 和 Text 组件，如导言示例中所示。这些函数以函数的形式而不是现成的组件的形式出现，以便您有机会提供主题对象的类型。这样做将使所有映射到主题值的 props 都具有基于主题中可用内容配置的正确类型。

Box

// In Box.tsx
import {createBox} from '@shopify/restyle';
import {Theme} from './theme';

const Box = createBox<Theme>();

export default Box;

Box 组件带有以下 Restyle 函数：backgroundColor、opacity、visible、layout、spacing、border、shadow、position。

Text

// In Text.tsx
import {createText} from '@shopify/restyle';
import {Theme} from './theme';

const Text = createText<Theme>();

export default Text;

Text 组件带有以下 Restyle 函数：color、textDecorationColor、opacity、visible、typography、textShadow、spacing、layout。它还包括一个变体，该变体会在主题的 textVariants 键下选择样式。

// In your theme
const theme = createTheme({
  ...,
  textVariants: {
    header: {
      fontFamily: 'ShopifySans-Bold',
      fontWeight: 'bold',
      fontSize: 34,
      lineHeight: 42.5,
      color: 'black',
    },
    subheader: {
      fontFamily: 'ShopifySans-SemiBold',
      fontWeight: '600',
      fontSize: 28,
      lineHeight: 36,
      color: 'black',
    },
    body: {
      fontFamily: 'ShopifySans',
      fontSize: 16,
      lineHeight: 24,
      color: 'black',
    },
  },
});

// In a component
<Text variant="header">Header</Text>

Box​

Text​

Box

Text