[앱화면만들기] <View> , <Text>, <ScrollView>

1. View 

화면의 영역(레이아웃)을 잡아주는 엘리먼트. 

해당 엘리먼트를 통해 화면분할하는 예제를 해보자.

 

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <View style={styles.subContainerOne}></View> <View style={styles.subContainerTwo}></View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, subContainerOne: { flex:1, backgroundColor:"yellow" }, subContainerTwo: { flex:1, backgroundColor:"green" } });

 

위와같이 영역이 분할되어 결과가 잘나오는걸 볼 수 있다.

View 엘리먼트에 각각 flex 값을 주어 영역을 나눌 수 있는걸 볼 수 있다.

 

2. Text

앱에 글을 작성하려면 반드시 사용해야하는 엘리먼트 입니다.

 

3. ScrollView

앱 화면을 벗어나는 영역의 경우 scrollview 엘리먼트로 감싸면 스크롤이 가능해지면서 모든 컨텐츠를 볼 수 있다.

import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { ScrollView, StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <ScrollView style={styles.container}> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> <View style={styles.textContainer}> <Text style={styles.textStyle}>영역을 충분 갖는 텍스트입니다.></Text> </View> </ScrollView> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', }, textContainer: { height:100, borderColor:'#000', borderWidth:1, borderRadius:10, margin:10, }, textStyle: { textAlign:"center" } });