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

螢幕選項

每個螢幕都可以設定各種關於如何在顯示它於在渲染器的 Navigator 中呈現它的面向，方式是指定特定選項，例如堆疊 Navigator 中的標題、底部標籤 Navigator 中的標籤圖示，等等。不同的 Navigator 支援不同的選項設定。

我們在基礎文件中的設定標題列區段說明了這運作的基本原理。您也可以參閱螢幕選項解決指南，瞭解在有多個 Navigator 時它們運作的方式。

有 3 種方式可以指定螢幕選項

螢幕上的選項prop​

您可以將名為選項的 prop 傳遞至螢幕元件以設定螢幕，您可以在其中指定一個包含該螢幕不同選項的物件

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={HomeScreen}
    options={{ title: 'Awesome app' }}
  />
  <Stack.Screen
    name="Profile"
    component={ProfileScreen}
    options={{ title: 'My profile' }}
  />
</Stack.Navigator>

您也可以將一個函數傳遞至選項。函數會收到導航 prop以及路由 prop以供該螢幕使用。如果您希望在選項中執行導航，這會很有用

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={({ navigation }) => ({
    title: 'Awesome app',
    headerLeft: () => (
      <DrawerButton onPress={() => navigation.toggleDrawer()} />
    ),
  })}
/>

群組上的screenOptions prop​

你可以傳一個名為 screenOptions 的 prop 給 Group 元件，在群組內設定螢幕，可以在此處指定具有不同選項的物件。在 screenOptions 中指定的選項套用於群組中所有螢幕。

範例

<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="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>

類似於 options，你也可以傳一個函式給 screenOptions。此函式會收到每个螢幕的 navigation prop 和 route prop。如果你想根據路由針對所有螢幕設定選項，這可能會很有用

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Profile" component={ProfileScreen} />
  <Stack.Group
    screenOptions={({ navigation }) => ({
      presentation: 'modal',
      headerLeft: () => <CancelButton onPress={navigation.goBack} />,
    })}
  >
    <Stack.Screen name="Settings" component={Settings} />
    <Stack.Screen name="Share" component={Share} />
  </Stack.Group>
</Stack.Navigator>

在導覽列元件上的 screenOptions prop​

你可以傳一個名為 screenOptions 的 prop 給導覽列元件，可以在此處指定具有不同選項的物件。在 screenOptions 中指定的選項套用於導覽列中的所有螢幕。因此，這是加入你想為整個導覽列設定的選項的理想位置。

範例

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

類似於 options，你也可以傳一個函式給 screenOptions。此函式會收到每个螢幕的 navigation prop 和 route prop。如果你想根據路由針對所有螢幕設定選項，這可能會很有用

<Tab.Navigator
  screenOptions={({ route }) => ({
    tabBarIcon: ({ color, size }) => {
      const icons = {
        Home: 'home',
        Profile: 'account',
      };

      return (
        <MaterialCommunityIcons
          name={icons[route.name]}
          color={color}
          size={size}
        />
      );
    },
  })}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>

navigation prop 有 setOptions 方法，讓你可以從元件內更新螢幕的選項。請參閱 導覽列 prop 文件 以取得詳細資料。

<Button
  title="Update options"
  onPress={() => navigation.setOptions({ title: 'Updated!' })}
/>