0048. 실전 FE 개발 배우기5 - flex, 정렬(justifyContent, alignItems), 버튼 종류, padding

섹션 0. 리액트 네이티브 시작!

11강. 리액트 네비게이션 사용해 보기

 

const Stack = createNativeStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={HomeScreen}
          options={{title: 'Running Papaya^_^!'}}
        />
        <Stack.Screen name="Details" component={DetailsScreen} />
        {/*<Stack.Screen name="Details">*/}
        {/*  {props => <DetailsScreen {...props} />}*/}
        {/*</Stack.Screen>*/}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

 

스크린을 두 개로 나누고, Home 화면이 메인(initialRouteName="Home")인 화면이다.

화면을 만들기 전에 미리 화면 구조에 대해서 생각한 다음에 구성해야 한다.

 

 

12강. flex와 요소배치

타입스크립트는 자바스크립트의 매개변수, 리턴 값, 변수 이 3개에다가 타입을 붙인 것

그래서 콜론(:) 뒷부분이 있으면 타입스크립트라고 인식해도 된다.

function HomeScreen({navigation}: HomeScreenProps)

 

1) flex

서로 간에 차지하는 비율(형제끼리 있을 때)

function HomeScreen({navigation}: HomeScreenProps) {
  return (
    <>
    <View style={{flex: 1, backgroundColor: 'orange', alignItems: 'center', justifyContent: 'center'}}>
      <Text>Special Login Page</Text>
      <Button
        title="Login"
        onPress={() => {
          /* 1. Navigate to the Details route with params */
          navigation.navigate('Details', {
            itemId: 86,
            otherParam: 'Anything you delivery here',
          });
        }}
      />
    </View>
    <View style={{flex: 1, backgroundColor: 'red'}}><Text>Second</Text></View>
    </>
  );
}

이렇게 쓰면 Login과 Second가 각각 flex가 1이므로 1:1로 화면이 나눠진다.

앱은 웹과 다르게 기준이 세로 기준이다.

 

 

각각 flex를 1, 2를 주면 1:2로 분할된다.

 

 

2) 정렬 - justifyContent

정렬하지 않으면 좌측 상단이 기준이다.

 

앱 정렬은 무조건 세로 기준이다.

justifyContent를 Center로 하면 가로 기준으로 중앙이 아니라 세로 기준으로 중앙으로 간다.

 

<justifyContent 주로 사용하는 정렬 종류>

• center : 중앙정렬
• flex-start : 시작점(상단정렬)
• flex-end : 마지막(하단정렬)

 

(1) center

 

(2) flex-start

 

 

(3) flex-end

 

 

3) 정렬 - alignItems

(1) center

 

(2) flex-start

 

(3) flex-end

 

 

이를 요약하면 다음과 같다.

justifyContent는 행을, alignItems는 열을 기준이라고 생각하면 된다.

 

 

4) 버튼

• TouchableHighlight : 클릭할 때 하이라이트가 됨(underlayColor로 하이라이트 컬러 조절 가능)
• TouchableOpaciry : 클릭할때 투명해짐
• Pressable : 그냥 누를 수 있게 됨
• Button : 그냥 버튼
• TouchableNativeFeedback : 화면이 밖으로 퍼지면서 클릭됨
• TouchableWithoutFeedback : 위랑 똑같은디..?!

 

안드로이드/IOS 통일시키려면 그냥 Pressable 쓰는 게 낫다.

 

 

5) Text style, padding

div(View) 스타일 따로, Text 스타일 따로 지정해야 된다.

위에서 'First'라는 글자를 바꾸려면 View를 바꾸면 안 되고, Text Style을 바꿔야 한다.

 

padding을 줄 때도 하나하나 다 지정을 해줘야 한다.

 

Left + Right = Horizontal

Top + Bottom = Vertical