얼렁뚱땅

[React Native] 스타일링 적용 방법(1) 본문

React Native

[React Native] 스타일링 적용 방법(1)

당당익명 2021. 8. 21. 18:39

리액트 네이티브에서는 스타일링 방식이 2가지가 있다.

 

  1. 인라인 스타일링
  2. 스타일시트 정의 스타일링

1. 인라인 스타일링

컴포넌트에 태그에 직접 스타일을 입력하는 방식

HTML에서는 문자열 형태로 스타일을 입력하지만, 리액트 네이티브에서는 객체 형태로 전달한다.

 

<Text
  style={{ fontSize: 25, fontWeight: '600', color: 'blue', padding: 10 }}>
  Inline Styling
</Text>

 

단점

  • 동일 코드 반복
  • 왜 해당 스타일이 적용되었는지 이해하기 어려움

2. 클래스 스타일링

 

스타일시트에 정의된 스타일을 사용하는 방법. CSS와 유사.

 

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

export default function Mainscreen() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>MainScreen Page</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#Feebf2',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 30,
  },
});

아래 StyleSheet에 스타일을 정의하고 (ex. container, text)

위의 컴포넌트에서 정의된 스타일의 이름으로 적용

 

장점

  • 스타일의 의도 파악 쉬움
  • 전체적인 스타일 유지보수가 쉬움
결론 : 클래스 스타일링이 더 편리하고 좋음

여러개 스타일 적용하기

  • 배열 사용하기
<Text style={[styles.text, styles.error]}> Inline Styling </Text>

뒤에 오는 스타일이 앞에 오는 스타일을 덮어쓴다. 

 

  • 인라인 스타일과 클래스 스타일 혼용
<Text style={[styles.text, {color:'green'}]}> Inline Styling </Text>

 

외부 스타일 이용하기

stylesheet는 export하고, 다른 파일에서 import 해주면 된다.