现在我们知道如何自定义标题的外观了，让我们相当有感觉！实际上，这也是不同凡响的，我们让它们以非常正确的方式响应我们的点击。

添加按钮到标题栏

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

  1. function StackScreen() {
  2.   return (
  3.     <Stack.Navigator>
  4.       <Stack.Screen
  5.         name="Home"
  6.         component={HomeScreen}
  7.         options={{
  8.           headerTitle: props => <LogoTitle {...props} />,
  9.           headerRight: () => (
  10.             <Button
  11.               onPress={() => alert('This is a button!')}
  12.               title="Info"
  13.               color="#fff"
  14.             />
  15.           ),
  16.         }}
  17.       />
  18.     </Stack.Navigator>
  19.   );
  20. }

当我们使用这种方式定义我们的按钮的时候，在options中的this变量不是HomeScreen组件的实例，所以你不能在这上面调用setState或者任何它的实例方法。这点非常重要，因为标题中的按钮与标题所属的屏幕交互是非常常见的。所以，我们将看看接下来如何实现这一点。

标题栏受屏幕组件的影响

为了能够和屏幕组件交互，我们需要使用navigation.setOptions定义我们的按钮，而不是使用options prop 属性。通过navigation.setOptions在屏幕组件内部使用，我们可以访问屏幕的props、状态（state）、上下文（context）等。

  1. function StackScreen() {
  2.   return (
  3.     <Stack.Navigator>
  4.       <Stack.Screen
  5.         name="Home"
  6.         component={HomeScreen}
  7.         options={({ navigation, route }) => ({
  8.           headerTitle: props => <LogoTitle {...props} />,
  9.         })}
  10.       />
  11.     </Stack.Navigator>
  12.   );
  13. }
  15. function HomeScreen({ navigation }) {
  16.   const [count, setCount] = React.useState(0);
  18.   React.useLayoutEffect(() => {
  19.     navigation.setOptions({
  20.       headerRight: () => (
  21.         <Button onPress={() => setCount(c => c + 1)} title="Update count" />
  22.       ),
  23.     });
  24.   }, [navigation]);
  26.   return <Text>Count: {count}</Text>;
  27. }

自定义返回按钮

createNativeStackNavigator为后退按钮提供特定于平台的默认值。在 iOS 上，这包括按钮旁边的标签，当标题适合可用空间时，它会显示上一个屏幕的标题，否则会显示“返回”。
您可以使用 headerBackTitle (阅读更多)更改标签行并且使用 headerBackTitleStyle修改样式。
如果要自定义后退按钮图像，您可以使用headerBackImageSource（阅读更多）。

覆盖返回按钮

只要用户可以从当前屏幕返回，后退按钮就会在native stack navgator中自动渲染——换句话说，只要
stack navgator中有多个屏幕，就会呈现后退按钮。
一般来说，这就是你需要的。但在某些情况下，你可能希望通过上述选项自定义后退按钮，在这种情况下，您可以将headerLeft选项设置为将呈现的 React 元素（渲染一个组件），就像我们使用headerRight那样。或者说，headerLeft选项还接受一个 React 组件，例如，它可以用于覆盖后退按钮的 onPress 行为。在api 参考中阅读更多相关信息。

小结

  • 您可以通过headerLeft和headerRight属性设置表头中的按钮options。
  • 后退按钮可以完全使用自定义headerLeft，但是如果你只想更改标题或图像，这儿还有其他options功能： headerBackTitleheader 、BackTitleStyleheader 和 BackImageSource
  • 您可以对 options 属性使用回调函数来访问navigation和route对象。