So erstellen Sie typerzwungene UI-Komponenten in React Native mit @shopify/restyle

Es ist schon eine ganze Weile her, seit ich einen technischen Beitrag auf meinem Blog geschrieben habe, und hier ist ein neuer über die Erstellung typerzwungener UI-Komponenten in React Native mit @shopify/restyle und expo.

@shopify/restyle ist eine leistungsstarke Styling-Bibliothek für React Native, die Ihren UI-Komponenten Typsicherheit und Konsistenz verleiht. Im Gegensatz zu herkömmlichen Styling-Ansätzen können Sie mit Restyle eine zentralisierte Designkonfiguration erstellen, die Designsystemprinzipien in Ihrer gesamten Anwendung durchsetzt.

Erste Schritte

Projekt-Setup

• Richten Sie Ihr React-Native-Projekt mit Expo ein

npx create-expo-app@latest

• Gehen Sie in Ihr Projektverzeichnis und installieren Sie das @shopify/restyle-Paket mit expo

cd /path/to/project
npx expo install @shopify/restyle

Erstellen Sie Ihr Theme

Erstellen Sie eine theme.tsx-Datei, um Ihr Designsystem zu definieren:

touch theme.tsx

• Kopieren Sie die Standarddesignkonfiguration und fügen Sie sie ein

import {createTheme} from '@shopify/restyle';

const palette = {
  purpleLight: '#8C6FF7',
  purplePrimary: '#5A31F4',
  purpleDark: '#3F22AB',

  greenLight: '#56DCBA',
  greenPrimary: '#0ECD9D',
  greenDark: '#0A906E',

  black: '#0B0B0B',
  white: '#F0F2F3',
};

const theme = createTheme({
  colors: {
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purplePrimary,
  },
  spacing: {
    s: 8,
    m: 16,
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: {
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
    defaults: {
      // We can define a default text variant here.
    },
  },
});

export type Theme = typeof theme;
export default theme;

Implementieren eines Theme-Anbieters

Aktualisieren Sie Ihre app/_layout.tsx:

import { DarkTheme, DefaultTheme } from "@react-navigation/native";
import { useFonts } from "expo-font";
import { Stack } from "expo-router";
import * as SplashScreen from "expo-splash-screen";
import { StatusBar } from "expo-status-bar";
import { useEffect } from "react";
import "react-native-reanimated";

import { ThemeProvider } from "@shopify/restyle";
import theme from "@/theme";

// Prevent the splash screen from auto-hiding before asset loading is complete.
SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [loaded] = useFonts({
    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
  });

  useEffect(() => {
    if (loaded) {
      SplashScreen.hideAsync();
    }
  }, [loaded]);

  if (!loaded) {
    return null;
  }

  return (
    <themeprovider theme="{theme}">
      <stack>
        <stack.screen name="(tabs)" options="{{" headershown: false></stack.screen>
        <stack.screen name="+not-found"></stack.screen>
      </stack>
      <statusbar>



<h2>
  
  
  Creating Reusable Components
</h2>

<h3>
  
  
  Text Component
</h3>



<pre class="brush:php;toolbar:false">touch components/Text.tsx

// In components/Text.tsx

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

export const Text = createText<theme>();

</theme>

Lassen Sie es uns auf unserem Startbildschirm verwenden

import { Text } from "@/components/Text";
import { SafeAreaView } from "react-native-safe-area-context";

export default function HomeScreen() {
  return (
    <safeareaview>
      <text margin="m" variant="header">
        This is the Home screen. Built using @shopify/restyle.
      </text>
    </safeareaview>
  );
}

Wie Sie im obigen Code sehen können, übergeben wir margin als „m“ statt als Zahl. Wir erhalten den Wert aus unserer theme.tsx-Datei.

// ./theme.tsx

const theme = createTheme({
  spacing: {
    s: 8,
    m: 16, // margin="m"
    l: 24,
    xl: 40,
  },
  textVariants: {
    header: { // our text header variant
      fontWeight: 'bold',
      fontSize: 34,
    },
    body: {
      fontSize: 16,
      lineHeight: 24,
    },
  },
    // ...rest of code
  },
});

So wird unsere Startseitenansicht aussehen

Skeleton Loader-Komponente

Lass uns eine Skeleton Loader-Karte bauen

touch components/SkeletonLoader.tsx

// components/SkeletonLoader.tsx

import {
  BackgroundColorProps,
  createBox,
  createRestyleComponent,
  createVariant,
  spacing,
  SpacingProps,
  VariantProps,
} from "@shopify/restyle";
import { Theme } from "@/theme";
import { View } from "react-native";

const Box = createBox<theme>();

type Props = SpacingProps<theme> &
  VariantProps<theme> &
  BackgroundColorProps<theme> &
  React.ComponentProps<typeof view>;

const CardSkeleton = createRestyleComponent<props theme>([
  spacing,
  createVariant({ themeKey: "cardVariants" }),
]);

const SkeletonLoader = () => {
  return (
    <cardskeleton variant="elevated">
      <box backgroundcolor="cardPrimaryBackground" height="{20}" marginbottom="s" width="70%" overflow="hidden" borderradius='{"m"}'>
      </box>

      <box backgroundcolor="cardPrimaryBackground" height="{100}" marginbottom="s" width="90%" overflow="hidden" borderradius='{"m"}'>
      </box>
      <box backgroundcolor="cardPrimaryBackground" height="{50}" marginbottom="s" width="70%" overflow="hidden" borderradius='{"m"}'>
      </box>
    </cardskeleton>
  );
};

export default SkeletonLoader;

</props></typeof></theme></theme></theme></theme>

• Wir erstellen eine neue Box als vordefinierte Komponente aus dem @shopify/restyle-Paket und so erstellen wir die Skeleton-Box

const Box = createBox<theme>();
</theme>

• Erstellen Sie eine neue CardSkeleton-Komponente mithilfe von createStyleComponent, um eine benutzerdefinierte Komponente zu erstellen. Wir haben Requisiten übergeben, bei denen es sich um Abstände und Kartenvarianten handelt, die wir in unserer theme.tsx-Datei definieren müssen

type Props = SpacingProps<theme> &
  VariantProps<theme> &
  BackgroundColorProps<theme> &
  React.ComponentProps<typeof view>;

const CardSkeleton = createRestyleComponent<props theme>([
  spacing,
  createVariant({ themeKey: "cardVariants" }),
]);
</props></typeof></theme></theme></theme>

• Erstellen Sie eine SkeletonLoader-Komponente, um unsere Skelton Card-Komponente zu rendern

// components/SkeletonLoader.tsx

export const SkeletonLoader = () => {
  return (
    <cardskeleton variant="elevated">
      <box backgroundcolor="cardPrimaryBackground" height="{20}" marginbottom="s" width="70%" overflow="hidden" borderradius='{"m"}'></box>

      <box backgroundcolor="cardPrimaryBackground" height="{100}" marginbottom="s" width="90%" overflow="hidden" borderradius='{"m"}'></box>
      <box backgroundcolor="cardPrimaryBackground" height="{50}" marginbottom="s" width="70%" overflow="hidden" borderradius='{"m"}'></box>
    </cardskeleton>
  );
};

Wir müssen noch eines tun, damit es funktioniert: theme.tsxfile aktualisieren, um „cardVariants“ zu haben

const theme = createTheme({
  colors: {
    // Add Black Color to use it later on
    black: palette.black,
  },
  // Add Border Radius Variants
  borderRadii: {
    s: 4,
    m: 10,
    l: 25,
    xl: 75,
  },
  // Add Card Variants
  cardVariants: {
    elevated: {
      shadowColor: "black",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
      elevation: 3,
      borderRadius: "m",
    },
    defaults: {
      padding: "m",
      borderRadius: "m",
    },
  },
});

Das ist großartig, aber lassen Sie uns unsere Komponente animieren

// components/SkeletonLoader.tsx

const ShimmerAnimation = () => {
  const shimmerTranslate = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(shimmerTranslate, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true,
      })
    ).start();
  }, [shimmerTranslate]);

  const translateX = shimmerTranslate.interpolate({
    inputRange: [0, 1],
    outputRange: [-300, 300],
  });

  return (
    <animated.view>



<p>and let’s use it in our Skeleton Loader Component<br>
</p>

<pre class="brush:php;toolbar:false">// components/SkeletonLoader.tsx

export const SkeletonLoader = () => {
  return (
    <cardskeleton variant="elevated">
      <box backgroundcolor="cardPrimaryBackground" height="{20}" marginbottom="s" width="70%" overflow="hidden" borderradius='{"m"}'>
        <shimmeranimation></shimmeranimation>
      </box>

      <box backgroundcolor="cardPrimaryBackground" height="{100}" marginbottom="s" width="90%" overflow="hidden" borderradius='{"m"}'>
        <shimmeranimation></shimmeranimation>
      </box>
      <box backgroundcolor="cardPrimaryBackground" height="{50}" marginbottom="s" width="70%" overflow="hidden" borderradius='{"m"}'>
        <shimmeranimation></shimmeranimation>
      </box>
    </cardskeleton>
  );
};

Und hier ist der vollständige Komponentencode:

// components/SkeletonLoader.tsx

import { useEffect, useRef } from "react";
import { Animated } from "react-native";
import {
  BackgroundColorProps,
  createBox,
  createRestyleComponent,
  createVariant,
  spacing,
  SpacingProps,
  VariantProps,
} from "@shopify/restyle";
import { Theme } from "@/theme";
import { View } from "react-native";

const Box = createBox<theme>();

const ShimmerAnimation = () => {
  const shimmerTranslate = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.loop(
      Animated.timing(shimmerTranslate, {
        toValue: 1,
        duration: 1500,
        useNativeDriver: true,
      })
    ).start();
  }, [shimmerTranslate]);

  const translateX = shimmerTranslate.interpolate({
    inputRange: [0, 1],
    outputRange: [-300, 300],
  });

  return (
    <animated.view>



<p>Et voila, we made a skeleton loader card using @shopify/restyle using </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173310152233378.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to build type-enforced UI components in React Native using @shopify/restyle"></p>

<h2>
  
  
  Support for dark mode
</h2>

<p>Let’s start with adding dark theme configuration, in your theme.tsxfile<br>
</p>

<pre class="brush:php;toolbar:false">// theme.tsx

export const darkTheme: Theme = {
  ...theme,
  colors: {
    ...theme.colors,
    mainBackground: palette.white,
    cardPrimaryBackground: palette.purpleDark,
    greenPrimary: palette.purpleLight,
  },
  textVariants: {
    ...theme.textVariants,
    defaults: {
      ...theme.textVariants.header,
      color: palette.purpleDark,
    },
  },

Fügen Sie unsere dunkle Designkonfiguration in unserem App-Layout hinzu, indem Sie sie zu unserer Datei „layout.tsx“ hinzufügen

npx create-expo-app@latest

• Verwenden Sie basierend auf dem Farbschema das standardmäßige helle Design oder verwenden Sie im dunklen Modus die in der Datei theme.tsx definierte DarkTheme-Konfiguration

 // app/_layout.tsx

 Thema importieren, { darkTheme } aus „@/theme“;

 //... Rest des Codes

    <themeprovider theme="{colorSchema" darktheme: thema>
      <stapel>
        <stack.screen name="(tabs)" options="{{" headershown: false></stack.screen>
        <stack.screen name=" not-found"></stack.screen>
      
      <statusbar>



<p>Hier ist der Dunkel- und Hellmodus.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173310152340178.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to build type-enforced UI components in React Native using @shopify/restyle"></p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173310152557660.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How to build type-enforced UI components in React Native using @shopify/restyle"></p>

<p>Voila, wir haben es geschafft, mit dem @shopify/restyle-Paket eine typerzwungene UI-Komponente zu erstellen</p>

<p>Vielen Dank :)</p>


          

            
        </statusbar></stapel></themeprovider>

Das obige ist der detaillierte Inhalt vonSo erstellen Sie typerzwungene UI-Komponenten in React Native mit @shopify/restyle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!