Comment configurer Design System pour mes projets React Native pour un développement plus rapide

Avez-vous déjà créé des applications que vous ne voudriez pas utiliser vous-même ?

Quand j'étais développeur d'applications junior, je construisais des interfaces utilisateur chaotiques.

Parfois, en regardant ces interfaces utilisateur, je pensais "qui dans le monde voudrait utiliser ça ? Ça a l'air horrible".

D'autres fois, il y avait juste « quelque chose qui clochait » que je ne pouvais tout simplement pas signaler.

Alors que j'avais l'habitude d'obtenir des designs incroyablement soignés de la part de l'équipe de conception, mes applications n'étaient même pas 20 % aussi belles.

J'étais conscient de ce problème, et pour le résoudre, je me suis lancé dans un terrier de recherche dans lequel je suis tombé sur le concept d'avoir un système de conception qui a transformé la façon dont je crée des applications.

Quelle est cette chose étonnante appelée Design System ?

Il est crucial de comprendre ce qu'est un système de conception pour pouvoir comprendre pourquoi en avons-nous besoin.

Le système de conception est fondamentalement une source centralisée de vérité pour vos décisions de conception et celles de vos équipes. Il vous indique quelles couleurs utiliser et où ? Combien de types de boutons l’application aura-t-elle ? Les cartes de votre liste auront-elles des ombres ? Toutes les réponses proviennent d'un système de conception.

Voici quelques-uns des avantages d'avoir un système de conception :

• UI cohérentes : Votre interface n'aura pas ces lacunes étranges ici et là sans raison. Il aura une apparence uniforme sur tous les appareils.

• Décisions rapides : Les systèmes de conception appliquent un certain ensemble de contraintes pour rendre vos décisions plus faciles, pas plus difficiles. Plus vous avez d'options, plus vous rencontrez de paralysie d'analyse.

• Applications évolutives : À mesure que l'application se développe, un système de conception permet de réutiliser les composants plutôt que de créer à partir de zéro.

• Concentrez-vous sur le développement : Vous n'avez plus à vous soucier de savoir si le bouton doit être vert ou bleu. Au lieu de cela, vous vous concentrerez sur ce qui compte.

Outils et bibliothèques

Bien qu'il existe des tonnes de bibliothèques d'interface utilisateur React Native, j'utilise une approche personnalisée car j'ai eu des expériences horribles avec la plupart d'entre elles en termes de performances et de bugs.

La seule bibliothèque sur laquelle je m'appuie pour mon approche est React-Native-Size-Matters.

Maintenant, avant de crier « la taille n'a pas d'importance ! », laissez-moi vous assurer que c'est le cas. Surtout lorsqu’il s’agit d’applications mobiles.

Vous ne voulez pas que vos utilisateurs ouvrent votre application, voient un logo géant couvrant tout et pensent "Qu'est-ce qui est moche..." avant de supprimer sans même essayer parce que votre logo masquait le bouton.

C'est là que React-Native-Size-Matters aide. Il rend vos applications réactives en adaptant vos composants à l'appareil. Ainsi, quel que soit l'appareil dont disposent les utilisateurs, votre logo reste exactement là où vous l'avez placé.

Configurer le thème

L'une des premières choses que je définis, ce sont mes jetons de conception de base. Ce sont les éléments constitutifs de mon système de conception. Ceux-ci incluent les palettes de couleurs, la typographie, les espacements et les tailles de police.

Je fais cela en créant un fichier theme.ts avec le code suivant :

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;

Création de composants réutilisables

Une fois mes jetons de conception en place, je définis certains composants réutilisables tels que Box, Typographie et Entrée. Ces composants adhèrent aux jetons de conception, garantissant ainsi la cohérence dans l'ensemble de l'application.

Par exemple, voici comment créer un composant 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>
  );
}

J'utilise ce composant Box nouvellement créé en remplacement de View. Cela me permet de le styliser rapidement via des accessoires (et de donner des suggestions si vous utilisez du dactylographié) comme ceci :

Voici un exemple de la façon dont je crée un composant Typographie que j'utilise à la place du composant Texte de React Native :

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>
  );
}

Voici un aperçu de la rapidité avec laquelle je peux ajouter des styles à mon composant Typographie personnalisé :

Crochet de thème à usage personnalisé

Au lieu d'importer le thème encore et encore, je rends mon code plus lisible en créant un hook useTheme personnalisé que j'appelle n'importe où dans l'application pour ajouter des styles qui adhèrent à mon thème.

Pour ce faire, j'utilise l'API Context de React pour transmettre mon thème dans l'application.

Je crée un fichier ThemeProvider.tsx et je définis à l'intérieur ThemeContext et ThemeProvider pour y envelopper le composant de mon application. Voici le code :

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>
  );
}

Ensuite, dans mon composant App :

export default function App() {
  return (
    <ThemeProvider>
      <AppNavigation />
    </ThemeProvider>
  );
}

Maintenant que l'intégralité de mon application a accès à ThemeContext, je crée mon hook useTheme :

import {useContext} from 'react';
import {ThemeContext} from '../styles/theme/ThemeProvider';

export default function useTheme() {
  const theme = useContext(ThemeContext);
  return theme;
}

Maintenant, je peux accéder à mon thème n'importe où en appelant le hook useTheme comme ceci :

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

Mode sombre

Pour implémenter le mode sombre, dans le fichier theme.ts, j'ajoute une autre palette de couleurs contenant les couleurs du mode sombre.

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

Then, in ThemeProvider, I simply check user settings and switch the theme like so:

<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>

Conclusion

Following this clear structured approach has brought much needed clarity, consistency, and aesthetics in my app while also sped up my development speed by at least 10x since I no longer have to dwell over design decisions.

I encourage you to try this approach and let me know what you guys think in the comments. Maybe improve it a little bit eh?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!