Section 7 : How to Handle Screen Layout
Layout Systems
: 3가지 종류가 있음.
1. Box Object Model
: 높이와 너비, element를 둘러싼 공간을 중심으로 하나의 element를 배치할 때 사용.
2. Flex Box : 부모 내에 자식 몇 개의 element들을 배치할 때 사용.
3. Position : 부모 내에 하나의 element를 배치할 때 + Box Object Model과 Flex Box를 override 하고 싶을 때 사용.
◎ Box Object Model
→ Content와 Padding : Background 색상을 보여줌.
→ Border와 Margin : Background 색상을 보이지 않음.
→ 각각의 요소에 다른 style을 줄 수 있음.
→ 다양한 속성들(아래 표)
이름 | 설명 |
margin | 모든 방면의 margin 값 설정. |
marginVertical | 위와 아래의 margin 값 설정. |
marginHorizontal | 왼쪽과 오른쪽의 margin 값 설정. |
padding | 모든 방면의 padding 값 설정. |
paddingVertical | 위와 아래의 padding 값 설정. |
paddingHorizontal | 왼쪽과 오른쪽의 padding 값 설정. |
borderWidth | 모든 방면의 border의 넓이를 설정. |
- alignItems : 정렬할 자식 컴포넌트를 감싸는 부모 컴포넌트에 설정하는 StyleSheet 속성.
→ stretch : 디폴트 값. 가능한 한 최대의 너비를 가지려 함.
→ flex-start : 가로를 기준으로 좌측 끝.
→ center : 가로를 기준으로 중앙.
→ center : 가로를 기준으로 중앙.
- flexDirection : 자식 컴포넌트들을 세로로 나열할 것인지, 가로로 나열할 것인지 결정.
→ column : 디폴트 값. 자식들을 세로로 나열함.
→ row : 자식들을 가로로 나열함.
⇒ flexDirection의 값에 따라 alignItems도 영향을 받게 됨.
- justifyContent : '주축(Primary Axis)'에 따라 자식 컴포넌트들을 배치함.
⇒ 얘도 flexDirection 의 영향을 받음.
→ flex-start : 디폴트 값. 부모 컴포넌트의 위쪽부터 나열됨.
→ center : 부모 컴포넌트의 중앙에 자식 컴포넌트를 위치시킴.
→ flex-end : 부모 컴포넌트의 바닥부터 자식 컴포넌트들을 나열함.
→ space-between : 자식 컴포넌트들 사이 일정한 간격을 두고 배치.
→ space-around : 자식 컴포넌트 사이 + 부모 컴포넌트의 위쪽과 아래쪽 사이에 일정한 간격을 두고 배치.
※ 부모 컴포넌트 : alignItems, justifyContent, flexDirection 으로 자식 컴포넌트들을 정렬함.
※ 자식 컴포넌트 : flex, alignSelf 를 통해 정렬을 수행.
- flex : 자식 컴포넌트가 부모 내에서 얼마만큼의 공간을 차지할 것인지 결정.
const Screen = () => {
return (
<View style={styles.viewStyle}>
<Text style={styles.firstTextStyle}>First Child</Text>
<Text style={styles.secondTextStyle}>Second Child</Text>
<Text style={styles.thridTextStyle}>Thrid Child</Text>
</View>
);
};
const styles = StyleSheet.create({
viewStyle: {
borderWidth: 3,
borderColor: 'black',
height: 200,
},
textOneStyle: {
borderWidth: 3,
borderColor: 'red',
},
textTwoStyle: {
borderWidth: 3,
borderColor: 'red',
flex: 1,
},
textThreeStyle: {
borderWidth: 3,
borderColor: 'red',
},
});
→ flex는 각 자식 컴포넌트가 갖는 flex값을 더한 후, 그 flex 값으로 부모 컴포넌트의 공간을 일정하게 나누어 할당하게 됨.
- alignSelf : 부모 컴포넌트의 alignItems 값을 override함.
→ flex-end, center, flex-start
Position
: 모든 element에는 'position' 속성이 있음.
→ position 속성은 'relative'를 디폴트 값으로 가짐.
→ position을 'absolute'로 할 경우
: 다른 자식들에게 무시당하게 됨. 부모 컴포넌트의 flex-box 규칙은 지킴. 부모에 설정된 'alignItems : 'stretch'은 무시함.
Top, Bottom, Left, Right 속성
: element들 사이에 여분의 공간(extra spacing)을 추가하는 데에 사용됨.
→ 이 공간은 모든 element들이 자리잡힌 후에 추가됨.
⇒ 다른 element들은 extra spacing의 추가에 의해 영향받지 않음.
※ 한 element가 부모를 전부 덮도록 하는 법?
→ position 속성을 absolute로 바꿈. + 해당 element의 top, bottom, left, right 속성값을 모두 0으로 설정.
⇒ StyleSheet.absoluteFillObject를 이용
textStyle: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
}
//위 코드와 아래 코드의 결과물은 같음.
textStyle: {
...StyleSheet.absoluteFillObject
//StyleSheet.absoluteFillObject에 설정되어 있는 위 5개의 속성을 그대로 복사
}
Section 8 : Putting It All Together - Restaurant Search App
React-Native 프로젝트 생성 방법
1. expo-cli : App 개발에 많이 쓰이는 기본적인 기능들(아이콘, 비디오, 카메라 등)을 미리 추가해놓음.
npx expo-cli init [프로젝트 이름]
//expo-cli 프로젝트를 새로 생성
2. react-native-cli : 디폴트 CLI. expo-cli와 달리 위 기능들을 추가하는 작업이 따로 필요함.
React Navigation
: App 내 Navigating을 위한 다양한 object를 제공.
1. Drawer Navigator : 왼쪽에 Drawer 메뉴바를 제공하는 Navigator.
2. BottomTabNavigator : 아래쪽에 메뉴바를 제공하는 Navigator.
3. StackNavigator
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import SomeScreen from './src/screens/SomeScreen';
const navigator = createStackNavigator({
//첫 번째 매개변수 : 띄울 스크린 컴포넌트 객체가 들어감
//Screen은 SomeScreen을 가리키는 key가 됨. key는 마음대로 설정 가능.
Screen: SomeScreen
}, {
//두 번째 매개변수 : Option
initialRouteName: Screen, //앱이 시작되면 가장 처음으로 나올 화면
defaultNavigationOptions: {
//각각의 화면에 사용될 option
//ex) 상단 바
title: 'Title' //상단 바에 띄울 텍스트
}
});
export default createAppContainer(navigator);
※ github.com/expo/vector-icons
: 이런저런 아이콘들이 있음.
→ 따로 뭘 설치할 필요는 없음.
//ex)
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { Feather } from '@expo/vector-icons';
const Screen = () => {
return (
<View>
<Feather name="search" size={30} />
</View>
);
};
TextInput
→ onEndEditing : 입력이 완료된 후 호출됨.
<TextInput
style={styles.inputStyle} placeholder="Search"
placeholder="Search"
onEndEditing={() => console.log('submitted')}
/>
'공부 > React & React Native' 카테고리의 다른 글
[0810] React-Native 강의 정리 (0) | 2021.08.11 |
---|---|
[0809] React-Native 강의 정리 (0) | 2021.08.10 |
[0806] React-Native 강의 정리 (0) | 2021.08.07 |
[0805] React-Native 강의 정리 (0) | 2021.08.06 |
[0804] React-Native 강의 정리 (0) | 2021.08.05 |