跳到主要内容

开始使用

在几分钟内构建一致的、主题化的 UI。

Welcome example

Restyle 库提供了一个类型强制系统，用于在 React Native 中使用 TypeScript 构建 UI 组件。它是一个用于构建 UI 库的库，以主题化为核心重点。

该库假设 UI 构建在设计系统之上，该系统（至少）定义了一组颜色和间距常量作为基础。虽然该库承认可以通过允许覆盖任何样式来存在系统例外情况，但当一次性值保持在最低限度时，它可以使开发人员的工作效率最高。

这是一个使用 Restyle 组件构建的视图示例

import {
  ThemeProvider,
  createBox,
  createText,
  createRestyleComponent,
  createVariant,
  VariantProps,
} from '@shopify/restyle';

// See the "Defining your theme" section under "Fundamentals"
import theme, {Theme} from './theme';

const Box = createBox<Theme>();
const Text = createText<Theme>();

const Card = createRestyleComponent<
  VariantProps<Theme, 'cardVariants'> & React.ComponentProps<typeof Box>,
  Theme
>([createVariant({themeKey: 'cardVariants'})], Box);

const Welcome = () => {
  return (
    <Box
      flex={1}
      backgroundColor="mainBackground"
      paddingVertical="xl"
      paddingHorizontal="m"
    >
      <Text variant="header">Welcome</Text>
      <Box
        flexDirection={{
          phone: 'column',
          tablet: 'row',
        }}
      >
        <Card margin="s" variant="secondary">
          <Text variant="body">This is a simple example</Text>
        </Card>
        <Card margin="s" variant="primary">
          <Text variant="body">Displaying how to use Restyle</Text>
        </Card>
      </Box>
    </Box>
  );
};

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Welcome />
    </ThemeProvider>
  );
};

Simple example

安装​

将包添加到您的项目

yarn add @shopify/restyle

用法​

在此处阅读有关 Restyle 用法的更多信息：这里。

演练场​

示例 是一个展示如何使用该库的示例应用程序。