U

리액트 내비게이션의 내비게이터에 있는 프레젠테이션 프로퍼티는 화면 사이를 탐색할 때 사용자에게 화면이 표시되는 방식을 구성하는 데 사용됩니다. 프레젠테이션 API는 개발자가 이러한 프레젠테이션 스타일을 지정할 수 있게 해주는 기반 기술로, React Native 앱에서 보다 네이티브와 유사한 사용자 경험을 제공할 수 있게 해줍니다.

카드 방식

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: '#fff' },
        }}
        initialRouteName="Home"
        presentation="card"
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

모달 방식

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

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyle: { backgroundColor: '#fff' },
          presentation: 'modal',
        }}
        initialRouteName="Home"
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

이 두 예제 모두 createStackNavigator 또는 createNativeStackNavigator 함수를 사용하여 스택 내비게이터를 만든 다음 원하는 프레젠테이션 스타일에 따라 프레젠테이션 프로퍼티를 "카드" 또는 "모달"로 설정합니다. 또한 두 예제 모두 화면의 헤더 및 배경 스타일을 사용자 지정할 수 있는 옵션이 포함되어 있습니다. 이 예제들은 React Native 프로젝트에서 일반적으로 자주 사용됩니다.

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.
http://bit.ly/3Y34pE0