style 따로 빼서 쓰기

1. 스타일 계산 함수

const greyPartItemStyle = (
    isFirstColumn: boolean,
    isLastColumn: boolean,
    width: number,
    height: number,
  ) => ({
    backgroundColor: '#282727',
    marginLeft: isFirstColumn ? 0 : marginLeftOrRight,
    marginRight: isLastColumn ? 0 : marginLeftOrRight,
    marginVertical: 5,
    width,
    height,
    borderRadius: 12,
    padding: 5,
  });
  
<View
  style={greyPartItemStyle(
    isFirstColumn,
    isLastColumn,
    width,
    height,
  )}>

 

 

2. 커스텀 훅 사용

const useDynamicStyle = (isFirstColumn, isLastColumn, width, height) => {
  return {
    itemStyle: {
      backgroundColor: '#282727',
      marginLeft: isFirstColumn ? 0 : marginLeftOrRight,
      marginRight: isLastColumn ? 0 : marginLeftOrRight,
      marginVertical: 5,
      width,
      height,
      borderRadius: 12,
    },
    // ... 다른 스타일들도 여기에 추가 가능 ...
  };
};

// 사용 예시
const styles = useDynamicStyle(isFirstColumn, isLastColumn, width, height);
<View style={styles.itemStyle}>
  {/* ... */}
</View>

 

// 이런식으로 쓰면된다
// return 안에 객체를 여러개 둬도 되고 지금처럼 1개만 둬도된다
import {colors} from '~/constants';

const cardGridStyle = (
  isFirstColumn: boolean,
  isLastColumn: boolean,
  width: number,
  height: number,
  margin: number,
  padding: number,
) => {
  return {
    backgroundColor: colors.cardColor,
    marginLeft: isFirstColumn ? 0 : margin,
    marginRight: isLastColumn ? 0 : margin,
    marginVertical: 5,
    width,
    height,
    borderRadius: 12,
    padding: padding,
  };
};

export default cardGridStyle;