标题按钮

现在我们已经知道如何自定义标题的外观，让我们让它们变得有感知力！实际上，也许这有点雄心勃勃，让我们只是让它们能够以非常明确的方式响应我们的触摸。

在标题中添加按钮

与标题交互最常见的方式是点击标题左侧或右侧的按钮。让我们在标题的右侧添加一个按钮（根据手指和手机尺寸，这是整个屏幕上最难触碰的地方之一，但也是放置按钮的正常位置）。

标题按钮

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>;
}

在这里，我们使用具有 onPress 处理程序的按钮更新 headerRight，该处理程序可以访问组件的状态并更新它。

自定义返回按钮

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。
• 你可以使用回调函数来访问 options 属性，以访问 navigation 和 route 对象。