[React Native] React Navigation - 3. [Stack] 화면 Linking

 

---

 

---

 

---

3. [Stack] 화면 Linking

 

stack-navigator - 버튼이나 사진을 눌렀을 때 화면을 전환시키는 기능.

 

 

React Navigation을 쓰기 위해서는 모든 컴포넌트들을 NavigationContainer라는 태그로 감싸줘야 한다. 그리고 StackNavigator를 쓰기 위해서는 createNativeStackNavigator를 import 해야 한다.

 

NavigationContainer는 Navigation 구조랑 상태를 관리하기 위한 컴포넌트로 모든 Navigation 구조는 NavigationContainer 태그 안에 들어가야 한다.

 

createNativeStackNavigator는 screen이랑 Navigator라는 2개의 프로퍼티를 리턴하는 함수이다. 화면이 렌더링되는 부분에서 <Stack.Navigator>, <Stack.Screen> 이런 식으로 사용된다. 여기서 Stack은 미리 아래와 같이 정의했기 때문에 그래서 이렇게 사용 가능하다.

 const Stack = createNativeStackNavigator();

<Stack.Navigator>는 Stack Navigator로 동작하는 부분이라는 의미이고 <Stack.Screen>는 Stack Navigator로 동작하는 화면이 추가될 태그이다.

 

각 화면에 버튼을 눌러 다른 화면으로 전환하는 기능을 구현해보자.

 

home.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

 import React, {Component} from 'react';
 import {
   StyleSheet,
   Text,
   View,
   Button,
 } from 'react-native';
 
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
  
 class HomeScreen extends Component {
   render(){
     return (
       <View style={{
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
        }}>  
         <Text>Home Screen</Text>
         <Button 
           title="To User Screen"
           onPress={() => {
             this.props.navigation.navigate('User')
           }} />
        </View>
     )
   }
 };
 
 const styles = StyleSheet.create({
 
 });
 
 export default HomeScreen;

user.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

 import React, {Component} from 'react';
 import {
   StyleSheet,
   Text,
   View,
   Button,
 } from 'react-native';
 
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
  
 class UserScreen extends Component {
   render(){
     return (
       <View style={{
         flex: 1,
         alignItems: 'center',
         justifyContent: 'center',
        }}>  
         <Text>User Screen</Text>
         <Button 
           title="To Home Screen"
           onPress={() => {
             this.props.navigation.navigate('Home')
           }} />
        </View>
     )
   }
 };
 
 const styles = StyleSheet.create({
 
 });
 
 export default UserScreen;

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {Component} from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/home';
import UserScreen from './src/user';

const Stack = createNativeStackNavigator();

class App extends Component {
  render(){
    return (
      <NavigationContainer>
        <Stack.Navigator> 
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen name="User" component={UserScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
};

const styles = StyleSheet.create({

});

export default App;

 

onPress에서는 navigation prop에 있는 navigator를 호출한다.

 

App.js 를 보면 Stack 이라는 함수를 정의했다. 이 함수는 Screen 이라는 프로퍼티를 리턴할 때, Screen 컴포넌트를 명시해 주는데 Navigation prop을 이 각각의 Screen 컴포넌트에 넘겨주게 된다. 따라서 Screen 컴포넌트에서는 this.props 를 이용해서 navigation prop 을 사용할 수 있는 것이고 navigation prop에 정의된 navigate 함수를 호출할 수 있게 된다. 그래서 onPress 안에는 this.props.navigation.navigate() 를 작성하고, navigate() 함수의 인자로는 App.js 에서 정의한 Screen의 name을 입력하여 준다.

 

---

참고 자료

https://www.inflearn.com/course/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C-%EA%B8%B0%EC%B4%88/dashboard

iOS/Android 앱 개발을 위한 실전 React Native - Basic - 인프런 | 강의