Programming/ReactNative

[ReactNative 기초] StyleSheet 사용

코딩뽀시래기 2021. 3. 6. 15:14
728x90

리액트 네이티브에서는 StyleSheet를 이용하여 배치, 폰트 크기, 마진 등 다양한 스타일을 적용할 수 있다.

 

간단한 예시를 적어보고, 나중에 여유가 생기면 StyleSheet의 요소들을 정리해보도록 하자.

const App = () => {
	return (
		<View style={styles.container}>
			<Text style={styles.text}>안녕하세요</Text>
		<View>
	);
};
export default App;

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

위의 코드처럼 const styles = StyleSheet.create({});로 스타일을 지정하고, 적용하고 싶은 곳에 style={styles.스타일명}을 적어주면 스타일이 적용된다.

728x90