[React Native] React Nativgation 적용하기 - 2

 

[React Native] React Nativgation 적용하기 - 1

 

1편에 이어서 bottom tabs 메뉴와 stack 메뉴를 함께 사용하는 법을 설명하려고 합니다!

어플리케이션에서 두가지 메뉴가 따로따로 사용될 일은 없겠지요? 

 

 

폴더구조

Nav
 -Tab
 -Stack

Screen
 -Movie
 -Tv
 -Search

 

 

NavigationContainer 에 두 메뉴를 모두 적어줘야합니다. tab와 stack 메뉴를 따로 쓴 컴포넌트를 Root.js 라는 컴포넌트를 만들어서 합쳐줍니다. 

 

Root.js

root를 app.js에서 import해주면 두가지 메뉴가 모두 스크린에 뜹니다. 이 때 필요없는 헤더부분을 지워주기 위해서 screenOptions에 headerShown을 명확하게 써줍니다.

const Nav = createNativeStackNavigator()

const Root = () => <Nav.Navigator  screenOptions={{headerShown: false, animation : "fade"}}>
    <Nav.Screen name="Tabs" component={Tabs}/>
    <Nav.Screen name="Stack" component={Stack}/>
</Nav.Navigator>

export default Root

 

App,js

export default function App() {
  return (
      <NavigationContainer>
        <Root/>
      </NavigationContainer>
  );
}

 

 

이제 실제로 두 메뉴가 적용될 페이지 컴포넌트로 넘어갑니다. 

페이지 컴포넌트 중인 하나인 Movie.js 부분입니다. 

onPress에 navigate를 쓰고 앞쪽에 명확하게 이동하싶은 메뉴를 씁니다. 

tab 메뉴에 있는 movie를 클릭하면 stack 메뉴의 three 페이지로 이동한다는 의미입니다!

const Movie = ({navigation: { navigate }}) => (
    <TouchableOpacity
    onPress={() => navigate("Stack", { screen : "Three"})}>
        <Text>Movie</Text>
    </TouchableOpacity>
)

export default Movie

 

 

 

◾ 예시 완성!