Eojin Han

공식 문서 : https://reactnavigation.org/docs/group/

개요

비슷한 스크린들을 Group으로 묶어서 스타일 등을 별도로 관리할 수 있다.

예를 들어 일반 화면들과, 모달로 떠야하는 화면들의 경우 각각의 그룹으로 나누어서 스타일 등을 적용한다.

사용 코드


<Stack.Navigator>
  <Stack.Group
    screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
  >
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
  </Stack.Group>

  <Stack.Group screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Search" component={SearchScreen} />
    <Stack.Screen name="Share" component={ShareScreen} />
  </Stack.Group>

	<Stack.Group
	  screenOptions={{
	    presentation: 'transparentModal',
	    animationEnabled: false,
	  }}
	>
	  <Stack.Screen name='GlobalModal' component={GlobalModal} />
	</Stack.Group>
</Stack.Navigator>

`screenOptions`

그룹 안의 스크린들에 적용될 옵션을 묶어서 설정할 수 있다.

대표적으로 presentation 옵션을 일괄로 설정한다.


<Stack.Group
  screenOptions={{
    presentation: 'modal',
  }}
>
  {/* screens */}
</Stack.Group>

함수로 넣게 되면 route, navigation 프롭을 받아서 활용할 수 있다

꼭 기억해 두자.


<Stack.Group
  screenOptions={({ route, navigation }) => ({
    title: route.params.title,
  })}
>
  {/* screens */}
</Stack.Group>

`navigationKey`

navigationKey 값이 변경되면 그룹 내의 모든 스크린들은 제거된다.

일반 Screen 옵션과 유사하지만 그룹 내의 스크린들이 모두 적용된다는 점이 다르다.

스택일 경우 removed

드로워일 경우 reset


<Stack.Group navigationKey={isSignedIn ? 'user' : 'guest'}>
  {/* screens */}
</Stack.Group>