5.2.4 뒤로가기

이번에는 버튼을 눌렀을 때 뒤로가기(이전 화면으로 이동)하는 방법을 알아보겠습니다. 뒤로가기를 할 때는 navigation.pop() 함수를 호출하면 되는데, 가장 첫 번째 화면으로 이동하고 싶을 때는 navgiation.popToTop() 함수를 호출합니다.

DetailScreen 컴포넌트를 다음과 같이 수정해주세요.

screens/DetailsScreen.js

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

function DetailScreen({route, navigation}) {
  return (
    <View style={styles.block}>
      <Text style={styles.text}>id: {route.params.id}</Text>
    <View style={styles.buttons}>
        <Button
          title="다음"
          onPress={() => navigation.push('Detail', {id: route.params.id + 1})}
        />
        <Button title="뒤로가기" onPress={() => navigation.pop()} />
        <Button title="처음으로" onPress={() => navigation.popToTop()} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  block: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 48,
  },
   buttons: {
    flexDirection: 'row',
  },
});

export default DetailScreen;