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값을 가지고 너비를 계산해서 랜더한다
높이는 너비에 상수곱해줌
'RN' 카테고리의 다른 글
기본적인 모달 (0) | 2023.12.10 |
---|---|
stack 넘어갈때 화면 번쩍임 해결(흰화면) (0) | 2023.12.08 |
style 따로 빼서 쓰기 (0) | 2023.12.07 |
riteSql 사용 (0) | 2023.12.04 |
구글드라이브에 업로드 (0) | 2023.12.04 |