Components Styling Basic

https://reactnative.dev/docs/components-and-apis

Core Components and APIs · React Native

 

View : Container

 HTML, CSS 처럼 Open, Closing Tag 가 있지만 (당연히 SelfClosing 도 있음 

web 에서 쓰는 tag 는 못쓴다. 

 

 

Styling

<Text style={{margin: 16, borderWidth: 1, borderColor: 'blue', padding: 5}}> Hi!! </Text>

이렇게 한줄로 하는 대신, 

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
dummyText: {
margin: 16,
padding: 16,
borderWidth: 2,
borderColor: 'red'}
});

StyleSheet Object 를 이용해서 style 을 만든 후

<Text style={styles.dummyText}>Hello</Text>

 

이렇게 만들 수 있다.

 

 

FlexBox (CSS 와 비슷)

 

Column 이 default 

 

 

 

 

출처: Udemy, Academind by Maximilian Schwarzmüller 의 React Native