React Native
Components Styling Basic
iosswift
2022. 4. 15. 01:53
https://reactnative.dev/docs/components-and-apis
Core Components and APIs · React Native
React Native provides a number of built-in Core Components ready for you to use in your app. You can find them all in the left sidebar (or menu above, if you are on a narrow screen). If you're not sure where to get started, take a look at the following cat
reactnative.dev
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