[React Native Expo] styled-component 쓰기 및 전역style 설정

vue에서는 처음부터 css가 분리되어있는데 react는 그렇지않다..

인라인으로 stylesheet을 쓰거나 styled-component같은 라이브러리를 써줘야한다.

처음엔 stylesheet을 쓰다가 아무래도 불편해서 styled-component를 적용해줬다

 

설치

npm i styled-components

npm i --save-dev babel-plugin-styled-components @types/styled-components @types/styled-components-react-native

 

그러고 babel.config.js에 플러그인에 추가

    plugins: [
      "babel-plugin-styled-components",
    ],

 

import styled from "styled-components";

return(
    <Container>
    </Container>
)

const Container = styled(View)`
  flex-direction: row;
  border-bottom: "#000";
  border-bottom-width: 0.2px;
`;

 

그러고 컴포넌트화시켜서 사용하면된다.

 

그럼 이제 궁금해진다. 톤앤매너 동일상 색상 hex코드 계속 쓰면 나중에 수정할때 빡세질텐데..

그래서 이제 styles폴더에 테마 함 만들어주고

export default {
  color: {
    main: "#fd3995",
    text: "#505050",
  },
  fonts: {
    normal: "14px",
  },
};

이렇게 색상 설정해준다음 app.js나 layout.tsx로 가서

import { ThemeProvider } from "styled-components";
import theme from "@/styles/theme";

<ThemeProvider theme={theme}>
	<Slot />
</ThemeProvider>

ThemeProvider로 theme값을 넘겨준다.

const Container = styled(View)`
  background-color: ${(props: any) => props.theme.color.main};
`;

그러고 컴포넌트나 페이지에서 이렇게 불러와서 쓰면

적용이 잘 된 모습을 볼 수 있다.