我如何为我的 React Native 项目设置设计系统以加快开发速度-js教程-PHP中文网

我如何为我的 React Native 项目设置设计系统以加快开发速度

DDD

发布： 2024-10-07 18:39:31

转载

620人浏览过

曾经构建过您不想自己使用的应用程序吗？

当我还是一名初级应用程序开发人员时，我曾经构建混乱的用户界面。

有时，当看到这些 ui 时，我曾经想“世界上谁会想使用这个？它看起来很糟糕”。

其他时候，只是有些“不对劲的地方”我无法指出。

虽然我曾经从设计团队那里获得过令人惊叹的精美设计，但我的应用程序看起来连 20% 都没有那么好。

我意识到了这个问题，为了解决这个问题，我深入研究了这个问题，其中我发现了一个设计系统的概念，它改变了我构建应用程序的方式。

设计系统这个神奇的东西是什么？

理解设计系统是什么至关重要，这样才能理解我们为什么需要它。

设计系统基本上是您和您的团队设计决策的集中事实来源。它告诉您要使用什么颜色以及在哪里使用？该应用程序将有多少种类型的按钮？您列表中的卡片会有阴影吗？所有的答案都来自于设计系统。

以下是拥有设计系统的一些好处：

一致的用户界面：您的界面不会无缘无故地到处都有那些奇怪的间隙。它在所有设备上的外观和感觉都是统一的。
快速决策：设计系统强制执行一组特定的约束，使您的决策更容易，而不是更困难。你拥有的选择越多，你遇到的分析瘫痪就越多。
可扩展的应用程序：随着应用程序的增长，设计系统有助于重用组件，而不是从头开始构建。
专注于开发：您不再需要强调按钮应该是绿色还是蓝色。相反，您将专注于重要的事情。

工具和库

虽然有大量的 react native ui 库，但我使用自定义方法，因为我在其中大多数库的性能和错误方面都有过可怕的经历。

我的方法唯一依赖的库是react-native-size-matters。

现在，在您尖叫“尺寸并不重要！”之前，让我向您保证，尺寸确实重要。尤其是在移动应用程序方面。

您不希望用户打开您的应用程序，看到一个覆盖所有内容的巨大徽标，然后在删除之前思考“丑陋的是什么......”，甚至不尝试就删除，因为您的徽标隐藏了按钮。

这就是react-native-size-matters 可以发挥作用的地方。它通过缩放组件以适应设备来使您的应用程序具有响应能力。因此，无论用户使用哪种设备，您的徽标都会准确地保留在您放置的位置。

设置主题

我定义的第一件事就是我的核心设计标记。这些是我的设计系统的构建模块。其中包括调色板、版式、间距和字体大小。

我通过使用以下代码创建 theme.ts 文件来实现此目的：

千图设计室AI海报

千图网旗下的智能海报在线设计平台

172

查看详情


import {moderatescale} from 'react-native-size-matters';

// after installing custom fonts:
export const fontfamily = {
  bold: 'poppins-bold',
  semibold: 'poppins-semibold',
  medium: 'poppins-medium',
  regular: 'poppins-regular',
  thin: 'poppins-thin',
};

const colors = {
  primary100: '#2e2c5f',
  primary80: '#524da0',
  primary60: '#736ddf',
  primary40: '#a09bff',
  primary20: '#dcdaff',

  secondary100: '#484a22',
  secondary80: '#858945',
  secondary60: '#d9df6d',
  secondary40: '#f8fca1',
  secondary20: '#fdffd4',

  neutral100: '#131218',
  neutral90: '#1d1c25',
  neutral80: '#272631',
  neutral70: '#343341',
  neutral60: '#3e3d4d',
  neutral50: '#53526a',
  neutral40: '#757494',
  neutral30: '#9c9ac1',
  neutral20: '#cbc9ef',
  neutral10: '#e8e7ff',
  white: '#fff',
  black: '#222',

  error: '#e7002a',
  success: '#3ec55f',
  warning: '#fecb2f',
  info: '#157efb',
};

const theme = {
  colors,
  fontsizes: {
    xxl: moderatescale(32),
    xl: moderatescale(28),
    lg: moderatescale(24),
    md: moderatescale(20),
    body: moderatescale(17),
    sm: moderatescale(14),
    xs: moderatescale(12),
    xxs: moderatescale(10),
    xxxs: moderatescale(8),
  },
  spacing: {
    none: 0,
    xxs: moderatescale(4),
    xs: moderatescale(8),
    md: moderatescale(12),
    lg: moderatescale(16),
    xl: moderatescale(20),
    xxl: moderatescale(24),
    xxxl: moderatescale(28),
  },
};

export default theme;

登录后复制

创建可重用组件

一旦我的设计令牌就位，我就会定义一些可重用的组件，例如 box、typography 和 input。这些组件遵循设计令牌，确保整个应用程序的一致性。

例如，这是我创建 box 组件的方法：


import {
  view,
  type viewprops,
  type flexaligntype,
  type viewstyle,
} from 'react-native';
import theme from '../styles/theme/theme';

export interface ibox extends viewprops {
  backgroundcolor?: keyof typeof theme.colors;
  p?: keyof typeof theme.spacing;
  pv?: keyof typeof theme.spacing;
  ph?: keyof typeof theme.spacing;
  pt?: keyof typeof theme.spacing;
  pb?: keyof typeof theme.spacing;
  pl?: keyof typeof theme.spacing;
  pr?: keyof typeof theme.spacing;
  m?: keyof typeof theme.spacing;
  mv?: keyof typeof theme.spacing;
  mh?: keyof typeof theme.spacing;
  mt?: keyof typeof theme.spacing;
  mb?: keyof typeof theme.spacing;
  ml?: keyof typeof theme.spacing;
  mr?: keyof typeof theme.spacing;
  gap?: number;
  flex?: number;
  flexdirection?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
  alignitems?: flexaligntype;
  justifycontent?:
    | 'center'
    | 'flex-start'
    | 'flex-end'
    | 'space-between'
    | 'space-around'
    | 'space-evenly';
  rounded?: boolean;
}

export default function box({
  backgroundcolor,
  p,
  pv,
  ph,
  pt,
  pb,
  pr,
  pl,
  m,
  mv,
  mh,
  mt,
  mb,
  ml,
  mr,
  children,
  style,
  flex,
  alignitems,
  justifycontent,
  flexdirection = 'column',
  rounded = false,
  gap = undefined,
  ...rest
}: ibox) {
  const getmargin = () => {
    const obj: any = {};

    if (m) {
      obj.margin = theme.spacing[m];
      return obj;
    }
    if (mt) obj.margintop = mt ? theme.spacing[mt] : 0;
    if (mb) obj.marginbottom = mb ? theme.spacing[mb] : 0;
    if (ml) obj.marginleft = ml ? theme.spacing[ml] : 0;
    if (mr) obj.marginright = mr ? theme.spacing[mr] : 0;
    if (mv) obj.marginvertical = theme.spacing[mv];
    if (mh) obj.marginhorizontal = theme.spacing[mh];
    return obj;
  };

  const getpadding = () => {
    const obj: any = {};

    if (p) {
      obj.padding = theme.spacing[p];
      return obj;
    }

    if (pt) obj.paddingtop = pt ? theme.spacing[pt] : 0;
    if (pb) obj.paddingbottom = pb ? theme.spacing[pb] : 0;
    if (pl) obj.paddingleft = pl ? theme.spacing[pl] : 0;
    if (pr) obj.paddingright = pr ? theme.spacing[pr] : 0;
    if (pv) obj.paddingvertical = theme.spacing[pv];
    if (ph) obj.paddinghorizontal = theme.spacing[ph];

    return obj;
  };

  const boxstyles: viewstyle[] = [
    {
      backgroundcolor: backgroundcolor
        ? theme.colors[backgroundcolor]
        : undefined,
      flex,
      justifycontent,
      alignitems,
      flexdirection,
      borderradius: rounded ? 10 : 0,
      gap,
    },
    getmargin(),
    getpadding(),
    style,
  ];

  return (
    <view style={boxstyles} {...rest}>
      {children}
    </view>
  );
}

登录后复制

我使用这个新创建的 box 组件来替代 view。它允许我通过 props 快速设计它的样式（如果您使用打字稿，则提供建议），如下所示：

我如何为我的 React Native 项目设置设计系统以加快开发速度

这是我如何创建 typography 组件的示例，我使用它来代替 react native 的 text 组件：


import react from 'react';
import {text, type textprops} from 'react-native';
import theme, {fontfamily} from '../styles/theme/theme';

export interface itypography extends textprops {
  size?: keyof typeof theme.fontsizes;
  color?: keyof typeof theme.colors;
  textalign?: 'center' | 'auto' | 'left' | 'right' | 'justify';
  variant?: keyof typeof fontfamily;
}

export default function typography({
  size,
  color,
  textalign,
  children,
  style,
  variant,
  ...rest
}: itypography) {
  return (
    <text
      {...rest}
      style={[
        {
          color: color ? theme.colors[color] : theme.colors.white,
          textalign,
          fontsize: size ? theme.fontsizes[size] : theme.fontsizes.body,
          fontfamily: variant ? fontfamily[variant] : fontfamily.regular,
        },
        style,
      ]}>
      {children}
    </text>
  );
}

登录后复制

以下是我向自定义排版组件添加样式的速度的预览：

我如何为我的 React Native 项目设置设计系统以加快开发速度

自定义使用主题挂钩

我没有一次又一次地导入主题，而是通过创建一个自定义的 usetheme 挂钩来使代码更具可读性，我在应用程序中的任何位置调用该挂钩来添加符合我的主题的样式。

为了做到这一点，我利用 react 的 context api 在应用程序中传递我的主题。

我创建了一个 themeprovider.tsx 文件，并在内部定义了 themecontext 和 themeprovider 以将我的应用程序组件包装在其中。代码如下：


import react, {type propswithchildren, createcontext} from 'react';
import theme from './theme';

export const themecontext = createcontext(theme);

export default function themeprovider({children}: propswithchildren) {
  return (
    <themecontext.provider value={theme}>{children}</themecontext.provider>
  );
}

登录后复制

然后，在我的应用程序组件内：


export default function app() {
  return (
    <themeprovider>
      <appnavigation />
    </themeprovider>
  );
}

登录后复制

现在我的整个应用程序都可以访问 themecontext，我创建了 usetheme 挂钩：


import {usecontext} from 'react';
import {themecontext} from '../styles/theme/themeprovider';

export default function usetheme() {
  const theme = usecontext(themecontext);
  return theme;
}

登录后复制

现在我可以通过调用 usetheme 挂钩在任何地方访问我的主题，如下所示：


const theme = usetheme();
// example usage:
theme.colors.primary100;
theme.spacing.md;
theme.fontsizes.lg;

登录后复制

深色模式

为了实现深色模式，在 theme.ts 文件中，我添加了另一个包含深色模式颜色的调色板。


export const darktheme = {
  // define dark mode colors here keeping the keys same as the light mode only changing the values.
}

登录后复制

然后，在 themeprovider 中，我只需检查用户设置并切换主题，如下所示：


<p>import {useColorScheme} from 'react-native';</p>

<p>export default function ThemeProvider({children}: PropsWithChildren) {<br>
const isDarkMode = useColorScheme() === 'dark';<br>
  return (<br>
    <ThemeContext.Provider value={isDarkMode ? darkTheme : theme}>{children}</ThemeContext.Provider><br>
  );<br>
}</p>

登录后复制