Divider - TypeScript

Divider 컴포넌트를 타입스크립트로 만들었습니다.

import React, {FC} from 'react';
import {View, ViewStyle,StyleProp } from 'react-native';
import { COLORS } from "../constants";

interface DividerProps {
  dividerStyle?: StyleProp<ViewStyle>;
  width?: number;
  orientation?: 'horizontal' | 'vertical';
  color?: string
}

const Divider: FC<DividerProps> = ({
 width = 1,
 orientation = 'horizontal',
 color = COLORS.btnLightGray,
 dividerStyle,
}) => {
 const dividerStyles: StyleProp<ViewStyle> = [
   {width: orientation === 'horizontal' ? '100%' : width},
   {height: orientation === 'vertical' ? '100%' : width},
   {backgroundColor: color},
   dividerStyle,
 ];

 return <View style={dividerStyles} />;
};

export default Divider;

1. 'react' 에서 FC를 가져 옵니다.

2. 'react-native'에서 ViewStyle 과 StyleProp 을 가져옵니다.

3. 메인 컴포넌트인 Divider를 FC<DividerProps> 로 정의 합니다.

4. props 로 받는 dividerStyle 은 배열이지만, 타입스크립트는 배열모두가 ViewStyle 또는 undefined 이면 StyleProps<ViewStyle> 로 받습니다. 이것은 싱글스타일 객체, 스타일 배열,  null/undefined 을 받을 수 있습니다.

5. const dividerStyles: StyleProps<ViewStyle> 을 적용합니다.

6. 사용

- <Divider dividerStyle= {styles.divider} width={1} />

- <Divider width={2} />

- divider: {

     marginTop: 5,

     marginBottom: 5,

},