グループ

Group コンポーネントは、組織的な目的のためにナビゲーター内の複数の 画面 をグループ化するために使用されます。ヘッダースタイルなどの同じオプションを画面のグループに適用するためにも使用できます。

Group は createXNavigator 関数から返されます

const Stack = createStackNavigator(); // Stack contains Screen & Navigator properties

ナビゲーターを作成した後、Navigator コンポーネントの子として使用できます

<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.Navigator>

また、Group コンポーネントを他の Group コンポーネント内にネストすることもできます。

プロパティ

screenOptions

グループ内の画面をナビゲーターにどのように表示するかを構成するためのオプション。オブジェクトまたはオブジェクトを返す関数を受け入れます

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

関数を渡す場合、route と navigation を受け取ります

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

これらのオプションは、各画面で指定された options とマージされ、画面のオプションがグループのオプションよりも優先されます。

詳細と例については、画面のオプション を参照してください。

navigationKey

画面のグループ画面のオプションキー。キーが変更されると、このグループ内の既存の画面はすべて削除されます（スタックナビゲーターで使用されている場合）またはリセットされます（タブまたはドロワーナビゲーターで使用されている場合）

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

これは Screen の navigationKey プロパティと似ていますが、画面のグループに適用されます。