React Native 하루 기록 - Style 적용하기

컴포넌트에 스타일을 적용하는 방법에는 아래와 같이 3가지 방법이 있다. 상황에 맞추어 사용하기 

♩ Inline style

컴포넌트마다 직접 입력한다

<Text style={{ fontSize: 22, fontStyle: "bold" }}></Text>

♩ StyleSheet style

StyleSheet를 생성하여 미리 정의해놓고 사용

.
.
.
<View style={styles.container}></View>
.
.
.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: statusBarHeight,
    backgroundColor: "#fff",
  },
});

♩ Styled Component

컴포넌트와 스타일을 한꺼번에 정의하여 사용

styled component를 사용하기 위해서는 라이브러리를 설치해야한다.

yarn add styled-components
또는
npm install styled-components

설치 후 import하여 사용

import styled from "styled-components/native";

const ProfileImage = styled.Image`
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
  border-radius: ${(props) => props.size * 0.3}px;
`;
.
.
.
 <ProfileImage source={{ uri }} size={size} />
 .
 .
 .