標題按鈕

現在我們已經知道如何自訂標題的外觀，讓我們讓它們變得更智能吧！其實這樣或許太有野心了，讓我們先讓它們能夠用非常明確的方式對我們的觸摸做出回應。

將按鈕新增至標題

與標題互動最常見的方式是輕按標題左右兩側的按鈕。讓我們在標題右側新增一個按鈕（這是整個螢幕上最難觸摸到的地方之一，視手指和手機尺寸而定，但也是按鈕常見的放置處）。

標題按鈕

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          headerTitle: (props) => <LogoTitle {...props} />,
          headerRight: () => (
            <Button
              onPress={() => alert('This is a button!')}
              title="Info"
              color="#fff"
            />
          ),
        }}
      />
    </Stack.Navigator>
  );
}

當我們以這種方式定義按鈕時，options 中的 this 變數不是HomeScreen 執行個體，因此您無法對其呼叫 setState 或任何執行個體方法。這非常重要，因為標題中的按鈕通常需要與標題所屬的螢幕進行互動。因此，我們將在接下來看看如何做到這一點。

💡 請注意，有一個社群開發的函式庫可用於在標題中渲染按鈕，並具有正確樣式：react-navigation-header-buttons.

標題與其畫面元件互動

某些情況下，標題中的元件需要與畫面元件互動。在這種情況下，我們需要使用 navigation.setOptions 來更新選項。透過在畫面元件內使用 navigation.setOptions，我們可以存取畫面的 props、狀態、內容等。

標題互動

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: (props) => <LogoTitle {...props} />,
          // Add a placeholder button without the `onPress` to avoid flicker
          headerRight: () => <Button title="Update count" />,
        })}
      />
    </Stack.Navigator>
  );
}

function HomeScreen({ navigation }) {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    // Use `setOptions` to update the button that we previously specified
    // Now the button includes an `onPress` handler to update the count
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

  return <Text>Count: {count}</Text>;
}

這裡我們使用一個按鈕更新 headerRight，按鈕帶有 onPress 處理常式，可以存取元件的狀態並更新狀態。

自訂返回按鈕

createNativeStackNavigator 提供返回按鈕的平台特定預設值。在 iOS 上，這包括按鈕旁的標籤，當標題符合可用空間時會顯示前一個畫面的標題，否則會顯示「返回」。

你可以使用 headerBackTitle 變更標籤行為，並使用 headerBackTitleStyle 套用樣式 (了解更多)。

若要自訂返回按鈕圖像，你可以使用 headerBackImageSource (了解更多)。

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen
    name="Details"
    component={DetailsScreen}
    options={{
      headerBackTitle: 'Custom Back',
      headerBackTitleStyle: { fontSize: 30 },
    }}
  />
</Stack.Navigator>

覆寫返回按鈕

當使用者可以從目前畫面返回時，返回按鈕將自動呈現在堆疊導覽列中，換句話說，只要堆疊中有多個畫面，就會呈現返回按鈕。

通常，這正是你想要的。但在某些情況下，你可能想要將返回按鈕自訂到超過上述選項的程度，這種情況下，你可以將 headerLeft 選項設定成要呈現的 React 元件，就像我們對 headerRight 所做的一樣。此外，headerLeft 選項也接受 React 元件，可以拿來用於覆寫返回按鈕的 onPress 行為。在 API 參考文件 中可以進一步了解。

摘要

• 你可以透過 options中的 headerLeft 和 headerRight 屬性在標題中設定按鈕。
• 雖然返回按鈕可以使用 headerLeft 進行全面自訂，但如果你只想變更標題或圖像，可以使用其他 options 來達成，例如 headerBackTitle、headerBackTitleStyle和 headerBackImageSource。
• 你可以使用選項屬性的回呼來存取 navigation 和 route 物件。