[React-Native] Nesting Navigators(화면 구조 설계) 01

- Stack.Navigator, Drawer.Navigator, Tab.Navigator 를 다 같이 쓰는 방법을 생각해보자

-> React Navigation에서는 이를 Navigator들을 nesting한다고 표현한다.

  - navigator들과 screen들 간의 구조 잡기

  - 어떤 structure를 설계하느냐에 따라 다양한 조합 가능

 

이런 구조로 만들어보자

 

 

MainScreen = () => {
  return (
    <Tab.Navigator
          initialRouteName="Home"
          tabBarOptions={{
            activeBackgroundColor: 'skyblue',
            activeTintColor: 'blue',
            inactiveTintColor: '#fff',
            style: {
              backgroundColor: '#c6cbef'
            },
            labelPosition: 'below-icon'
          }}
          screenOptions={({route})=>({
            tabBarLabel: route.name,
            tabBarIcon: ({focused})=>(
              TabBarIcon(focused, route.name)
            )
          })}
        >
          <Tab.Screen name="Home" component={TabHomeScreen} />
          <Tab.Screen name="User" component={TabUserScreen} />
          <Tab.Screen name="Message" component={TabMessageScreen} />
    </Tab.Navigator>
  )
}

  - MainScreen이라는 함수는 <Tab.Navigator>와 그 하위의 <Tab.Screen>들을 return 함

  - 이전의 <Tab.Navigator> 안에서 만든 코드를 복사해온다.

    -> 이 전체가 Stack Navigator의 component이다.

 

 

<Stack.Screen name="Home_Stack" component={StackHomeScreen} />

  - 혼선 방지를 위해 'HomeScreen'이라는 component 이름을 'StackHomeScreen'으로 변경

 

 

<Button
            title="Go To Home Stack Screen"
            onPress={()=>{
                this.props.navigation.navigate('Home_Stack')
            }}
          />

  - home_tab.js에는 Home_Stack으로 이동할 수 있는 버튼을 만들어보자

 

  - 각각의 탭을 눌러도 Header Bar Title의 변함이 없다.

    -> 모든 TabScreen이 하나의 Stack Screen Component로 묶여 있기 때문!

  - 버튼을 누르면 예전에 만든 Stack Screen의 화면이 뜬다.

 

 

 

---

 

 

• 추가적으로 params를 주고받아볼까

this.props.navigation.navigate('User', {
                  userIdx: 100,
                  userName: 'Gildong',
                  userLastName: 'Hong'
                })

  - 이전에 home.js에서 설계했던 params들이다.

 

 

render() {
        console.warn(this.props.route)

  - user_tab.js에서 전해지나 확인해보는 warning 창을 띄워보자

 

  - warning 잘 뜬다. = params 전달 잘 된다.