✅ 오늘 배운 것
오늘의 할 일은 다음과 같다.
완성 단계에 있는 디자인을 적용해주면 되고, 위에가 여러 화면과 컴포넌트 디자인 이슈들 중 내가 맡은 것들이다. 차근히 하나씩 해 보자. 위의 이슈들이 컴포넌트 반영 이슈들이고, 아래의 이슈들이 스크린(화면)을 만드는 이슈들이다. 컴포넌트를 만들고 화면을 만드는 것이 우선순위이니 차례대로 해 보자.
우선 맨 위의 '카테고리바 컴포넌트 디자인 반영' 이슈를 보자.
다음은 기존의 코드이다.
const renderItem = ({ item, handlePress }) => (
<ListItem
title={item.title}
accessoryLeft={renderItemIcon}
onPress={() => handlePress(item)}
/>
);
UI Kitten에서 제공하는 라이브러리 덕분에 ListItem이라는 컴포넌트만 쓰면 이런 예쁜 화면이 나왔었다.
이제 이걸 뜯어내 보면, 다시 제로부터 돌아간 태초의 화면이 보인다. 이제 이 화면을 예쁘게 만들어줘야 한다.
이제는 외부 라이브러리에서 제공하는 아이콘을 사용하는 게 아니라 SVG 아이콘을 직접 사용해야 한다. 그러므로 피그마에서 아이콘을 직접 다운받고 .svg 파일의 포맷을 사용하기 위해서 필요한 별도 라이브러리를 다운받아 주자.
npm install react-native-svg react-native-svg-transformer
그리고 피그마에 맞게 padding, margin 등의 값을 잘 입력해 주면, 다음과 같은 화면을 볼 수 있다.
'개발 일기장 > SWM Onestep' 카테고리의 다른 글
20241128 TIL: terraform으로 IaC를 통해 AWS 설정 복사하기 [진행중] (1) | 2024.11.28 |
---|---|
20241127 TIL: terraform으로 IaC를 통해 AWS 설정 복사하기 [진행중] (0) | 2024.11.28 |
20241102 TIL: 드디어 에뮬레이터 실행 관련 이슈 청산하고 애플로그인 마무리하기 [진행중] (2) | 2024.11.02 |
20241029 TIL: 갑자기 막힌 ios emulator expo prebuild 에러 해결하기 [진행중] (1) | 2024.10.31 |
20241029 TIL: React Native로 ios 에뮬레이터에서 애플로그인 하기 [진행중] (3) | 2024.10.29 |