@shopify/restyle을 사용하여 React Native에서 유형 적용 UI 구성 요소를 구축하는 방법

블로그에 기술 게시물을 쓴 지 꽤 오랜 시간이 흘렀습니다. @shopify/restyle 및 expo를 사용하여 React Native에서 유형 적용 UI 구성 요소를 구축하는 방법에 대한 새로운 게시물이 있습니다.

@shopify/restyle은 UI 구성 요소에 유형 안전성과 일관성을 제공하는 강력한 React Native용 스타일 라이브러리입니다. 기존 스타일링 접근 방식과 달리 Restyle을 사용하면 전체 애플리케이션에 걸쳐 디자인 시스템 원칙을 적용하는 중앙 집중식 테마 구성을 만들 수 있습니다.

시작하기

프로젝트 설정

• expo를 사용하여 반응 네이티브 프로젝트 설정

npx create-expo-app@latest

• 프로젝트 디렉토리로 이동하여 expo를 사용하여 @shopify/restyle 패키지를 설치하세요.

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

테마 만들기

theme.tsx 파일을 만들어 디자인 시스템을 정의하세요.

touch theme.tsx

• 기본 테마 구성을 복사하여 붙여넣습니다.

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;

테마 제공자 구현

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>

홈 화면에서 사용해보자

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

위 코드에서 볼 수 있듯이 마진을 숫자 대신 "m"으로 전달하고 있습니다. theme.tsxfile에서 값을 가져옵니다.

// ./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
  },
});

홈페이지 보기는 다음과 같습니다

스켈레톤 로더 구성요소

스켈레톤 로더 카드를 만들어 봅시다

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>

• @shopify/restyle 패키지에서 사전 정의된 구성 요소로 새 상자를 생성하며 이것이 Skeleton Box를 생성하는 방법입니다.

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

• createStyleComponent를 사용하여 새 CardSkeleton 구성 요소를 생성하여 사용자 정의 구성 요소를 생성하고 theme.tsx 파일에서 정의해야 하는 간격 및 카드 변수인 소품을 전달했습니다.

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>

• Skelton Card 구성 요소를 렌더링하기 위한 SkeletonLoader 구성 요소 생성

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

이 기능을 작동시키려면 theme.tsxfile을 업데이트하여 카드 변형을 갖도록 해야 합니다.

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

좋습니다. 하지만 구성요소에 애니메이션을 적용해 보겠습니다

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

전체 구성 요소 코드는 다음과 같습니다.

// 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,
    },
  },

layout.tsx 파일에 어두운 테마 구성을 추가하여 앱 레이아웃에 추가하세요

npx create-expo-app@latest

• 색상 스키마에 따라 기본 밝은 테마를 사용하거나 어두운 모드에서는 theme.tsx 파일에 정의된 darkTheme 구성을 사용합니다.

 //app/_layout.tsx

 "@/theme"에서 테마 가져오기, { darkTheme };

 //... 나머지 코드

    <themeprovider theme="{colorSchema" darktheme :>
      
        <stack.screen name="(tabs)" options="{{" headershown: false></stack.screen>
        <stack.screen name=" 찾을 수 없음"></stack.screen>
      스택>
      



<p>어두운 모드와 밝은 모드가 있습니다.</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>자, 짜잔, @shopify/restyle 패키지를 사용하여 유형 적용 UI 구성 요소를 만들었습니다</p>

<p>감사합니다 :)</p>


          

            
        </themeprovider>

위 내용은 @shopify/restyle을 사용하여 React Native에서 유형 적용 UI 구성 요소를 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!