[ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(2) - Stack으로 페이지 이동

ㅅ2020/04/08 - [Javascript/React] - [ React Native ] react-navigation을 이용한 리액트 네이티브 화면 이동(1) - 개요 및 설치

화면 간 이동

 

StackNavigator 설치

---

> npm install @react-navigation/stack

 

 

사용법

---

- Screen과 Navigator 두가지 속성을 필수로 return 해야한다.

 >> Screen의 필수 props : name, component

 >> 하나에 Navigator에 여러개의 Screnn이 있을 수 있으며 초기 경로를 지정하면 Navigator에 initialRouteName 옵션을 사용

- <NavigationContainer>는 모든 네비게이터 구조를 감싸며 네비게이션 트리와 상태를 관리한다.

- navigation 속성을 이용해 Screen component의 화면 함수를 구성한다. (navigation 속성 공식문서)

 

 

 

 

Stack 네비게이션 불러오기

---

> import { createStackNavigator } from '@react-navigation/stack';

 

 

 

Stack 선언

---

> const Stack = createStackNavigator();

 

 

 

 

export 구성

---

function App() {

  return (

    <NavigationContainer>

      <Stack.Navigator initialRouteName="Home">

        <Stack.Screen name="Home" component={HomeScreen} />

        <Stack.Screen name="Details" component={DetailsScreen} />

      </Stack.Navigator>

    </NavigationContainer>

  );

}

 

export default App;

 

 

 

화면 이동

---

import * as React from 'react';

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

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

 

function HomeScreen({ navigation }) {

  return (

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

      <Text>Home Screen</Text>

      <Button

        title="Go to Details"

        onPress={() => navigation.navigate('Details')} // Details로 화면 이동

      />

    </View>

  );

}

 

 

 

화면 추가

---

<Button

title="Go to Details... again"

onPress={() => navigation.push('Details')}

/>

 

 

뒤로가기

---

<Button title="Go back" onPress={() => navigation.goBack()} />

 

 

 

첫 페이지로 이동

---

# popToTop 이용

<Button

title="Go back to first screen in stack"

onPress={() => navigation.popToTop()}

/>

 

# 첫 번째 화면을 직접 연결

<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />