I Learn || react native에서 styled-components 사용하기

react native에서는 일반적인 html 태그를 사용하는게 아니라, View, Text, Image, TextInput, ScrollView 등을 이용해서 구조를 짤수 있습니다.

ex

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
      }}>
      <Text>Hello, world!</Text>
    </View>
  )
}
export default HelloWorldApp;

스타일은 inline style을 사용해서 작성하거나,
StyleSheet 를 사용해서 작성해야 합니다.
inline styledms 위의 예시에서 확인할 수 있고,
StyleSheet 를 사용하는건 아래와 같습니다.

ex

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})

const LotsOfGreetings = () => {
  return (
    <View style={styles.center}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

create 메소드 안에 객체가 있고, 객체의 key안에 스타일이 객체형식으로 들어갑니다.

그래서 더 사용하기 편한 styled-components 를 사용하는 방법을 알아봤습니다.

1. 패키지 설치
   yarn add styled-components

2. 설치한 패키지 import
   import styled from 'styled-components/native';

3. 일반 styled-components 처럼 사용
   한가지 다른점이 있다면 html 태그를 넣어주는것이 아닌 리액트네이티브에서 사용하는 컴포넌트를 넣어줍니다.

   import styled from 'styled-components/native';
   
   const Container = styled.View`
   	display: flex;
   	flex-direction: row;
   `

styled-components 를 사용하면,
import {View, Text} from 'react-native'; 와 같이 태그들을 다 import 안해줘서 편합니다. 👍🏻

이밖에 react native 를 공부하면서 특이하다고 느낀점

• onClick 이 아니라 onPress
• border: 1px solid black; 이 안됨;;
  • border-color: black;
  • border-width: 1px;
    대강 이런 식입니다;;
• flex를 자주 사용하는데 flex-direction default 값이 column 입니다.
• 이건 다른 피씨랑 비교를 못해봐서 그런데 안드로이드 에뮬레이터에서 기본 텍스트 컬러가 'black' 이 아니고, 회색입니다. 이건 더 공부해봐야 정확히 알거 같습니다..
• box-shadow 쓰는 방법이 다릅니다.
  • 일반적인 방법 box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px
  • 순서랑 설정하는 갯수가 다릅니다 box-shadow: 0px 6px 12px, rgba(50, 50, 93, 0.25) 근데 이렇게 하면 안드로이드랑 ios 랑 조금 틀립니다.(물론 전 가상머신에서만 확인 했습니다)
  • ios에서는 문서를 보시면 컬러 말고도 3가지 태그로 사용할 수 있습니다
  • 안드로이드에서는 컬러만 사용하고, elevation 태그를 사용해야 됩니다... (디테일한 설정이 가능한지 아직 모르겠습니다)