react-native 스타일

스타일링

- 인라인 스타일링

- 클래스 스타일링

- 외부 스타일링

- 플랫폼 구분해서 스타일링

- 스타일드 컴포넌트

 

 

 

인라인 스타일링

 

• 객체 형태: HTML에서는 문자열 형태로 입력하는데 반해 객체로 전달
• 카멜 케이스
• 비슷한 역할을 하는 컴포넌트에 코드가 반복될 수 있음
• 수정이 번거롭다
• 코드만으로 스타일이 적용된 이유 이해하기 어렵다. (클래스, 스타일드 이용하면 명칭을 지정할 수 있어 이해하기 편합니다.)

[App.tsx]

<Text style={{fontSize: 14, color: '#000000'}}>
	inline-styling
</Text>
<Text style={{fontSize: 14, color: '#ffffff'}}>
	inline-styling						
</Text>
<Text style={{fontSize: 14, color: 'pink'}}>
	inline-styling						
</Text>

 

 

 

클래스 스타일링

 

• 스타일시트에 정의된 스타일을 사용
• 인라인 스타일링보다 깔끔
• 명칭을 지정할 수 있기 때문에 의도파악이 수월하다
• 간편한 수정: 여러개를 사용했을 때 정의한 스타일시트의 스타일만 변경해주면 된다.

[App.tsx]

<Text style={styles.text}>
	class-styling
</Text>
<Text style={[styles.text, styles.red]}>
	class-styling
</Text>
<Text style={[styles.text, {color: 'pink'}]}>
	class-styling
</Text>

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

 

여러개의 스타일을 적용하고 싶으면 배열의 형식으로 전달하면 된다.

클래스 뿐아니라 인라인 스타일도 함께 적용 가능.

적용된 순서에 따라 스타일이 나중에 먹힘 (배열의 index가 높을수록 스타일 우선순위)

 

 

 

 

외부 스타일

 

• 제작한 스타일을 다양한 곳에서 사용하고 싶은 경우
• 외부의 파일에 스타일을 정의하고 필요한 곳에서 가져와서 사용할 수 있다.
• 사용방법은 클래스 스타일과 동일

[styles.tsx]

import  {StyleSheet} from "react-native";

export const textStyles = StyleSheet.create({
	text: {
		padding: 10,
		fontSize: 15,
		fontWeight: '600',
		color: 'black',
	},
	error: {
		fontWeight: '400',
		color: 'red',
	},
});



[App.tsx]

import {viewStyles, textStyles} from './styles';

<Text style={[textStyles.text, {color: 'green'}]}>
	외부 스타일 - Text 12
</Text>
<Text style={[textStyles.text, textStyles.error]}>
	외부 스타일 - Error
</Text>

 

 

 

 

플랫폼 구분해서 스타일링

 

•  Platform 사용해서 플랫폼을 구분해서 스타일링을 줄 수 있다
• 플랫폼마다 적용하는 스타일이 다른 경우가 있기 때문에 필요할 때 적용해주면 된다

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

const ShadowBox = () => {
	return (
		<View style={styles.shadow}>
			<Text>box</Text>
		</View>
	)
}

const styles = StyleSheet.create({
	shadow: {
		backgroundColor: '#ffffff',
		width: 200,
		height: 200,
		justifyContent: 'center',
		alignItems: 'center',
		...Platform.select({
			ios: {
				shadowColor: '#000000',
				shadowOffset: {
					width: 10,
					height: 10,
				},
				shadowOpacity: 0.5,
				shadowRadius: 10,
			},
			android: {
				elevation: 20,
			}
		})
	}
})

 

 

 

 

 

스타일드 컴포넌트

💡 스타일드 컴포넌트는 자바스크립트 파일 안에 스타일을 작성하는 CSS-in-JS 라이브러리이며, 스타일이 적용된 컴포넌트라고 생각하면 이해하기 쉽다.

 

• 케밥 케이스로 표기가능: '-' 사용
• 사용하던 스타일 그대로 사용: RN에서는 고유한 스타일을 적용했어야 했지만 css처럼 사용 가능
• 태그드 템플릿 리터럴: styled.(컴포넌트 이름) 바로 뒤에 백틱'`'을 붙이고 그 안에 스타일을 적용하면 됩니다.
  ※컴포넌트의 이름은 반드시 존재하는 컴포넌트를 지정해줘야 합니다.
• 스타일 코드 재사용 가능
• 완성된 컴포넌트 상속받아 사용 가능: styled(스타일드 컴포넌트 이름)
• 백틱안에서 파람값을 받아서 스타일, attr 가능

npm install styled-components

const StyledInputs = styled.TextInput.attrs((props: any) => ({
	placeholder: props.placeholder,
	placeholderTextColor: props.borderColor,
}))`
	width: 200px;
	height: 60px;
	margin: 5px;
	padding: 10px;
	border-radius: 10px;
	border: 2px;
	border-color: ${(props: any) => props.borderColor};
	font-size: 15px;
`


<StyledInputs
	borderColor='#000000'
	placeholder='입력하세요' />