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;
'RN' 카테고리의 다른 글
stack 넘어갈때 화면 번쩍임 해결(흰화면) (0) | 2023.12.08 |
---|---|
FlatList 격자형태로 이쁘게 나열하기 (0) | 2023.12.08 |
riteSql 사용 (0) | 2023.12.04 |
구글드라이브에 업로드 (0) | 2023.12.04 |
구글 로그인 (0) | 2023.12.01 |