Why styled-component

• 개발자는 css 코드에 익숙해져 있음
• 하지만 리액트 네이티브 내에서 스타일링을 하려면 JS Object Notation을 사용해야 함
• 이는 개발자의 실수를 유발할 뿐만 아니라, css 코드를 반드시 string으로 입력해야 하는 불편함이 추가적으로 존재함
• JS 내에서 css를 편리하게 활용해줄 수 있도록 돕는 게 styled-component

설치

npm install --save styled-components

Import

import styled from "styled-components/native";

• /native를 붙여서 불러와야 함
• 그렇지 않으면 웹 버전의 DOM styled-component를 불러오게 됨

사용

• 불편한 react-native의 styles props를 사용할 필요가 저언혀 없이 컴포넌트 이름도 깔끔하게 사용가능해서so awesome함

import React from "react";
import { TouchableOpacity, Text } from "react-native";
import Stack from "../navigation/Stack";
import styled from "styled-components/native";

const Btn = styled.View`
  background-color: tomato;
`;

const Title = styled.Text`
  color: white;
`;

const Movies = ({ navigation: { navigate } }) => (
  <Btn
    style={{ flex: 1, justifyContent: "center", alignItems: "center" }}
    onPress={() => navigate(Stack, { screen: "one" })}
  >
    <Title>Movies</Title>
  </Btn>
);

export default Movies;

Props

기존 styled-component props 사용법과 완전히 같음

const Btn = styled.View`
  background-color: ${(props) => (props.selected ? "tomato" : "skyblue")};
`;

화면 기록 2022-04-24 오후 10.10.57.mov

• Props는 TypeScript에서는 사용법이 좀 다르기 때문에 아 그렇구나 하고 넘어가면 될 듯

Themes