Eojin Han

스켈레톤이란?설치 디펜던시 설치 스켈레톤 설치 사용법 SkeletonPlacehoder.Item로 사용 (비추)View와 함께 사용 (추천)

공식 깃헙 :
react-native-skeleton-placeholder
Github
react-native-skeleton-placeholder
Owner
chramos
Updated
Aug 25, 2023

스켈레톤이란?

설치

디펜던시 설치

@react-native-masked-view/masked-view

react-native-linear-gradient


$ yarn add @react-native-masked-view/masked-view react-native-linear-gradient

or

$ npm install @react-native-masked-view/masked-view react-native-linear-gradient --save


cd ios
pod install

스켈레톤 설치


$ yarn add react-native-skeleton-placeholder

or

$ npm install react-native-skeleton-placeholder --save

사용법

SkeletonPlacehoder.Item로 사용 (비추)

그냥 SkeletonPlaceholder 안에 View로 정의하는게 더 편하므로 비추천


import React from "react";
import { View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";

const App = () => {
  return (
    <SkeletonPlaceholder>
      <SkeletonPlaceholder.Item flexDirection="row" alignItems="center">
        <SkeletonPlaceholder.Item width={60} height={60} borderRadius={50} />
        <SkeletonPlaceholder.Item marginLeft={20}>
          <SkeletonPlaceholder.Item width={120} height={20} borderRadius={4} />
          <SkeletonPlaceholder.Item
            marginTop={6}
            width={80}
            height={20}
            borderRadius={4}
          />
        </SkeletonPlaceholder.Item>
      </SkeletonPlaceholder.Item>
    </SkeletonPlaceholder>
  );
};

View와 함께 사용 (추천)

겉에만 <SkeletonPlaceholder></SkeletonPlaceholder> 으로 감싸주면 되고, 형태는 하던대로 <View> 컴포넌트로 구현하면 됨.


import React from "react";
import { View } from "react-native";
import SkeletonPlaceholder from "react-native-skeleton-placeholder";

const App = () => {
  return (
    <SkeletonPlaceholder>
      <View style={{ flexDirection: "row", alignItems: "center" }}>
        <View style={{ width: 60, height: 60, borderRadius: 50 }} />
        <View style={{ marginLeft: 20 }}>
          <View style={{ width: 120, height: 20, borderRadius: 4 }} />
          <View
            style={{ marginTop: 6, width: 80, height: 20, borderRadius: 4 }}
          />
        </View>
      </View>
    </SkeletonPlaceholder>
  );
};