3. React Navigation - stack navigation을 통한 화면전환방법

https://reactnavigation.org/docs/getting-started

 

프로젝트 생성 후 

 

1. react-navigation 설치

npm install @react-navigation/native

 

2. dependency 설치

npm install react-native-screens react-native-safe-area-context

From React Native 0.60 and higher, linking is automatic. So you don't need to run react-native link.

react native 0.60 버전 이하만 react-native link 시켜줘야하고, 그 이상은 자동으로 연결됨

 

3. Stack Navigation 설치

npm install @react-navigation/native-stack

 

App.js

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';  //모든 컴포넌트를 NavigationContainer에 감싸줘야함 - 네비게이션 구조, 상태 관리
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import HomeScreen from './src/home';
import UserScreen from './src/user';

const Stack = createNativeStackNavigator(); // 스크린, 네비게이터를 return 

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

export default App;

<Stack.Navigator>

: 스택 네비게이터로 동작하는 부분이 여기다 라고 구분

  - initialRouteName : 가장 먼저 화면에 보이고자 하는 화면 지정(원래는 Stack.Screen 순서대로 화면에 뜸)

  - screenOptions : Screen 하나하나가 아닌, 공통으로 스타일 주는 경우

 

<Stack.Screen> : 스택네비게이터로 추가할 화면들어갈 부분 (*이때 navigation prop을 각각의 component에 넘겨줌)

  - name : 페이지 명

  - component : 연결할 페이지 

  - initialParams : 파라미터(넘길데이터)로 보낼 초기값

  - options :  상단에 이름 변경 (생략 시 name이 상단이름으로 default)

 

 

./src/home.js

import React, { Component } from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';

 class HomeScreen extends Component {
   render() {
     return(
        <View style={{flex:1, alignItems:'center', justifyContent:'center'}}>
            <Text>Home11 !!!!!</Text>
            <Button
            	title="To User Screen"
            	onPress={()=>{
                	this.props.navigation.navigate('User') 
            	}} 
            />
            <Button 
                title="Change the title"
                onPress={()=>
                    this.props.navigation.setOptions({
                        title:'Changed!!!!',
                        headerStyle:{ backgroundColor:'pink'},
                        headerTintColor:'red'
                })
                }
            />
        </View>
     )
   }
 }
 
 
 export default HomeScreen;

this.props.navigation.navigate('name')

- this.props.navigation을 사용해서 app.js 에서 component로 받은 navigation prop을 받을 수 있음 

- nativagion prop에 정의된 함수
  1) navigate('name') : 해당 페이지로 넘어가도록 도와줌 

  2) setOptions : navigation의 Option을 바꿀 수 있음

 

 

./src/user.js

import React, { Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';

 class UserScreen extends Component {
   render() {
     return(
        <View>
            <Text>User !!!!!</Text>
        </View>
     )
   }
 }
 
 
 const styles = StyleSheet.create({
 });
 
 export default UserScreen;

 

4. 네이게이터로 데이터 보내는법

   - parameter를 route로 passing하는 법

 

home.js 에서 버튼을 누르면 user.js 로 넘어가는 상황

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

parameter에 객체를 싣어서 보내면 

 

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

this.props.route 로 데이터를 받음