[React Native] React Navigation - 4. [Stack] Navigation Params

---

 

---

 

---

4. [Stack] Navigation Params

 

params를 이용하면 화면 이동 시에 데이터를 주고받을 수 있다.

 

route라는 개념을 알아야 하는데 길이라는 뜻인데 스크린 각각이 루트가 된다. 아래 코드에서는 Home route, User route 가 된다. 원래는 가장 위에 선언된 스크린이 가장 먼저 뜨게 되는데, 아래 코드처럼 Navigator에 initialRouteName을 통해 가장 먼저 뜨는 스크린을 지정할 수 있다.

<Stack.Navigator initialRouteName="User">

 

Home 스크린에서 User 스크린으로 데이터를 보낼 건데 React Native에서는 데이터를 주고받는 것을 '파라미터를 루트로 패싱한다'고 표현한다.

Screen name 다음 파라미터로 보내고 싶은 데이터를 전달한다. {} 안에 쓴 것들이 User 스크린으로 보내는 데이터이고 파라미터로 불린다. 이 값들이 User Screen의 route 값이 된다.

<Button 
   title="To User Screen"
   onPress={() => {
     this.props.navigation.navigate('User', {
       userIdx: 100,
       userName: 'Gildong',
       userLastName: 'Hong',
     })
   }} />

데이터를 전달받는 스크린인 User.js에서 변수를 선언하는데 params 라는 객체를 만든다. 이 객체는 this.props.route로 가져와 이 스크린의 route 값을 할당한다.

params에 값이 있다면 그 값을 넣고 아니면 null 값을 넣는다.

const { params } = this.props.route;
const userIdx = params ? params.userIdx : null;
const userName = params ? params.userName : null;
const userLastName = params ? params.userLastName : null;

 

아래와 같은 코드로 결과를 화면에서 출력할 수 있다.

<Text>User Idx : {JSON.stringify(userIdx)}</Text>
<Text>User Name : {JSON.stringify(userName)}</Text>
<Text>User LastName : {JSON.stringify(userLastName)}</Text>

 

Home 스크린에서 User 스크린으로 이동하기 위해 버튼을 누르면 버튼이 눌릴 때, userIdx, userName, userLastName이 파라미터로 User의 route에 패싱이 된다.

 

User 스크린의 입장에서 보면 패싱된 값들이 본인의 route에 있는 것이라 this.props.route로 params를 받아온다. route에 패싱된 값들이 없으면 params가 비어있는 것이라 null 값을 주고, 각각의 값들이 있으면 그 값들을 넣어준다.

 

그리고 initialParams를 통해 초기에 params를 설정하려면 아래와 같이 Screen 태그에서 작성하면 된다.

/**
 * 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 initialRouteName="User">
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen
            name="User"
            component={UserScreen}
            initialParams={{
              userIdx: 50,
              userName: 'Gildong',
              userLastName: 'Go',
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
};

const styles = StyleSheet.create({

});

export default App;

 

 

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', {
               userIdx: 100,
               userName: 'Gildong',
               userLastName: 'Hong',
             })
           }} />
        </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() {
    const { params } = this.props.route;
    const userIdx = params ? params.userIdx : null;
    const userName = params ? params.userName : null;
    const userLastName = params ? params.userLastName : null;

    return (
      <View style={{
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
      }}>
        <Text>User Screen</Text>
        <Button
          title="To Home Screen"
          onPress={() => {
            this.props.navigation.navigate('Home')
          }} />
        <Text>User Idx : {JSON.stringify(userIdx)}</Text>
        <Text>User Name : {JSON.stringify(userName)}</Text>
        <Text>User LastName : {JSON.stringify(userLastName)}</Text>

      </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 initialRouteName="Home">
          <Stack.Screen name="Home" component={HomeScreen}/>
          <Stack.Screen name="User" component={UserScreen}/>
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
};

const styles = StyleSheet.create({

});

export default App;

 

 

---

참고 자료

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 - 인프런 | 강의