[React-Native] react-navigation 으로 페이지 이동하기

 

$ npm install @react-navigation/native

$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

 

stacknavigation 을 사용하여 history 식으로 구현

 

$ npm install @react-navigation/stack

 

App.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import StackNav from './navigations/Stack';

const App = () => {
  return (
    <NavigationContainer>
      <StackNav />
    </NavigationContainer>
  );
};

export default App;

 

src/navigations/Stack.js

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import {Page1, Home, Page2} from '../pages';

const Stack = createStackNavigator;

const StackNav = () => {
  return (
  // initialRouteName의 값은 아래 name 중 하나여야한다. 그 값에 해당하는 화면이 첫 화면이 된다.
  // initialRouteName을 적지 않으면 Stack.Screen 중 제일 위에 적혀있는 것이 첫 화면이 된다.
    <Stack.Navigator initialRouteName="Home">	
      <Stack.Screen name="Home" component={Home} />	
      <Stack.Screen name="Page1" component={Page1} />
      <Stack.Screen name="Page2" component={Page2} />
    </Stack.Navigator>
  );
};

export default StackNav;

 

src/pages/Home.js

import React from 'react';
import {Button} from '../components/Button';

const Home = ({navigation}) => {
  return (
    <Container>	
      <Button onPress{() => navigation.navigate('Page1') />
    </Container>
  );
};

export default Home;

 

 

페이지 이동할 때는 component에 전달되는 navigation 을 props로 받아서 navigation.navigate('페이지명')

으로 사용하면 된다.