# 标题按钮

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

# 向标题栏添加按钮

与标题栏交互的最常见方式是点击标题左边或右边的按钮。让我们在头部的右侧添加一个按钮(根据手指和手机的大小,这是整个屏幕上最难触摸的地方之一,但也是放置按钮的正常位置)。

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 (opens new window)

# Header 与屏幕组件交互

为了能够与屏幕组件交互,我们需要使用 navigation.setOptions 来定义我们的按钮而不是 options 属性。通过在屏幕组件内部调用 navigation.setOptions,我们可以访问屏幕的propsstatecontext等。

function StackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={HomeScreen}
        options={({ navigation, route }) => ({
          headerTitle: (props) => <LogoTitle {...props} />,
        })}
      />
    </Stack.Navigator>
  );
}

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

  React.useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
      ),
    });
  }, [navigation]);

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

# 自定义后退按钮

createStackNavigator 为后退按钮提供了平台特定的默认值。在 iOS 上,这包括按钮旁边的标签,当标题留有可用空间时,显示前一个屏幕的标题,否则显示“返回”。

你可以用 headerBackTitleheaderTruncatedBackTitle 来改变标签行为。

要自定义后退按钮图像,可以使用 headerBackImage

# 重写后退按钮

后退按钮将在堆栈导航器中自动渲染,只要用户有可能从当前屏幕返回 —— 换句话说,后退按钮将在堆栈中有多个屏幕时渲染。

一般来说,这是您想要的。但在某些情况下,你可能想要自定义后退按钮来满足通过上述选项配置无法实现的功能,在这种情况下,你可以设置 headerLeft 选项为 react 元素来渲染,就像我们使用 headerRight。或者,headerLeft 选项也接受 React 组件,例如,它可以用于覆盖返回按钮的 onPress 行为。请在 api 参考 (opens new window)中阅读更多相关内容。

如果你想保留后退按钮的视图,只重写 onPress 方法,你可以从 @react-navigation/stack 导入 HeaderBackButton,并将该组件分配给 headerLeft 选项。

# 总结

  • 你可以通过 options 中的 headerLeftheaderRight 属性设置标题中的按钮。
  • 后退按钮是完全可自定义的headerLeft,但如果你只是想改变标题或图像,还有其他options- headerBackTitle, headerTruncatedBackTitle,和 headerBackImage
  • 您可以对 options 属性使用回调来访问 navigationroute 对象。