FlatList 격자형태로 이쁘게 나열하기

FlatList로 요소들을 나열할때 

그냥 justifyContent: 'space-between'를 준다면 화면의 좌우끝은 안떨어져있지만
요소들이 서로 붙어있어서 margin을 주면 화면을 넘어가버린다

 

그래서 이쁘게 정렬하려면

화면 너비, margin값, numColumns를 가지고 계산해야한다

 

예시코드

<FlatList
  data={filteredMemoList}
  key={numColumns + 'memo'}
  keyExtractor={(_, index: number) => index.toString() + 'memo'}
  numColumns={numColumns}
  scrollEnabled={false}
  renderItem={({item: memoData, index}) => {
    const isFirstColumn = index % numColumns === 0;
    const isLastColumn = (index + 1) % numColumns === 0;
    const width =
      (windowWidth -
        2 * margin.subContainerMargin -
        (numColumns - 1) * 2 * margin.memoCardMargin) /
      numColumns;
    const height = width * 1.2;

    const forderColor = mainData.forderList.find(
      forder => forder.id === memoData.forderId,
    )?.color;
    return (
      <Pressable onPress={() => onClickReadMemo(memoData)}>
        <View
          style={{
            alignItems: 'center',
          }}>
          {/* 내용 */}
          <View
            style={cardGridStyle(
              isFirstColumn,
              isLastColumn,
              width,
              height,
              margin.memoCardMargin,
              padding.memoCardPadding,
            )}>
            <CustomText
              style={{
                position: 'absolute',
                left: padding.memoCardPadding,
                top: padding.memoCardPadding,
                zIndex: 1,
                height: height - padding.memoCardPadding,
              }}
              text={memoData.content}
            />

            <View
              style={flapStyle(
                width,
                height * 0.4,
                forderColor || colors.defaultForderColor,
              )}>
              <View style={leftPeakMemoStyle(width, height)} />
            </View>
          </View>

          {/* 제목 */}
          <CustomText
            style={titleStyle(width)}
            numberOfLines={1}
            text={memoData.title}
          />
        </View>
      </Pressable>
    );
  }}
/>

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;

 

가장자리는 안띄우고

한줄에 몇개를 랜더할건지와 margin값을 가지고 너비를 계산해서 랜더한다

높이는 너비에 상수곱해줌