跳到主要內容
版本：6.x

群組

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 合併，而畫面的選項將優先於群組的選項。

有關更多詳細資料和範例，請參閱 畫面的選項。

一組畫面畫面的選用鍵。如果鍵值變更，則此群組中的所有現有畫面都會移除（如果在堆疊導覽器中使用）或重設（如果在分頁或側邊欄導覽器中使用）

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

這類似於 Screen 中的 navigationKey 屬性，但適用於一組畫面。