어리둥절 분석가 그리고 개발자

✔️ 필요성 react-native + styled-component로 개발하다보면 간혹 이런 에러 메시지를 확인할 수가 있다. width 어딘가에 units, 즉 단위가 없다는 얘기로 들린다. ✔️ 문제 확인 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼... import React from 'react'; import styled from 'styled-components/native'; import {Dimensions} from 'react-native'; const FlatList = styled.FlatList` width: ${Dimensions.get('window')...

✔️ 필요성 styled-components에서 props를 받아서 그 값에 따라 다르게 컴포넌트를 꾸미는 방법이 있다. 자세한 건 아래 포스팅을 참고! Styled-Components로 React Native Pressable 꾸미기 React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '.. sezzled.tistory.com props 값을 받아서 props 값에 따라 theme에 있는 컬러를 가지고 오고 싶을 때는 어떻게 하나? ✔️ 문제 상황 내가..

✔️ 문제상황 styled-component 공식문서에서 시키는대로 props에 따라서 스타일링을 다르게 하고 싶은데, 무엇인가 속성이 또 없다고 합니다. 왠지 typescript 때문인 것 같습니다. ✔️ 해결 styled-component 부분에서 generic을 활용해서 style에서 활용하는 props의 type값을 지정해주면 됩니다.

✔️ 필요성 React Native에서 컴포넌트를 이미 만들어둔 다음에, 사용할 때 margin이나 padding만 조금 더 추가해서 쓰고 싶은 적 없으신가요?!! 맨처음부터 확정된 margin을 줘버리면 나중에 위치 레이아웃할 때 싹 다 꼬인다구요! 그러면서도 CSS와 JS를 깔끔하게 분리해서 코드 짜고싶은 마음 저만 있는거 아니죠...? styled-components를 활용하면 가능합니다. ✔️ 참고 styled-components 공식 문서를 보면 나와있긴 합니다만 styled-components: Basics Get Started with styled-components basics. styled-components.com ✔️ 활용 예제 SectionTitle이라고 메뉴의 타이틀을 나타내는 글..

✔️ 필요성 React Native에서 아이콘을 하나 만들어서 쓰는데, 위치에 따라 색깔이 바뀔 수도 있고 크기만 바꿔서 여러군데에서 사용하고 싶을 때가 있습니다. 즉, svg 파일의 크기와 색깔을 자유롭게 스타일링하고 싶습니다. ✔️ React Native에서 svg 파일 불러오도록 설치 필요 React Native에서 svg 파일을 불러와서 사용하기 위해서는 react-native-svg 그리고 react-native-svg-transformer 패키지를 설치해야 합니다. 단순히 설치 이상으로 설정해주어야 하는 것이 있기 때문에 아래 포스팅을 참고해서 설치를 끝내도록 합시다. React Native에서 svg 파일 사용하기 1) xml로 불러오기 React Native에서 svg를 불러올 때에는 re..