React Native navigation 화면 간 이동하기

각 화면을 component로 만들어 둔 후 이들 간의 이동을 구현하기 

난 Home.js의 Home이라는 component와 Graph.js의 Graph라는 component 사이의 navigation을 구현했다.

react-navigation이라는 라이브러리를 사용했더니 생각보다 훨씬 쉽게 해결됐다.

 

우선 App.js 에 다음과 같이 네비게이션을 설정해준다.

import React from 'react';
import Home from "./Home";
import Graph from './Graph';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

class App extends React.Component {

  ...
  
  render() {

    return (
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
            title: "Home",
            headerShown: false,
            }}
          />
          <Stack.Screen
            name="Graph"
            component={Graph}
            options={{
            title: "Graph",
            headerShown: false,
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

export default App;

 

Home에서는 개구리 이미지를 클릭하면 Graph로 이동하도록 다음과 같이 작성하면 된다.

 

class Home extends React.Component {

 ...

  render() {

    ... 

    return (
     
     ...

      <TouchableOpacity onPress={() => this.props.navigation.navigate('Graph');}> 
      <Image source={require('./frog.png')} />
      </TouchableOpacity>          
     ... 
   )
  };

 

Graph에서도 마찬가지로 개구리 이미지를 클릭하면 Home으로 이동하도록 했다.

 

class Graph extends React.Component {

  ...

  render() {


    return (
    ...
      
      <TouchableOpacity onPress={() => this.props.navigation.navigate('Home');}> 
      <Image source={require('./frog.png')} />
      </TouchableOpacity>    

  ... 
  
   )
  };