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

리액트 네이티브에서는 스타일링 방식이 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 해주면 된다.