이전에 화면 전환할 때 navigate 함수도 사용할 수 있고, push 함수도 사용할 수 있다고 배웠죠? 이제 두 함수가 무엇이 다른지 알아봅시다.

DetailScreen 컴포넌트를 사용하겠습니다. 먼저 push 함수를 사용해 화면 전환해볼까요?

screens/DetailScreen.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>
      <Button
        title="다음"
        onPress={() => navigation.push('Detail', {id: route.params.id + 1})}
      />
    </View>
  );
}

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

export default DetailScreen;