React Navigation 5.x 第六章导航头的按钮

最新推荐文章于 2025-06-10 12:01:49 发布

翻译最新推荐文章于 2025-06-10 12:01:49 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://reactnavigation.org/docs/header-buttons/

React Navigation 专栏收录该内容

16 篇文章

订阅专栏

本文讲解了如何在React中自定义导航栏样式，并通过代码示例演示了如何响应触摸事件，包括添加按钮、与屏幕组件交互及重写返回按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在我们知道了如何自定义我们导航头的样式，现在我们来让他能够响应我们的触摸事件。

在导航头上添加一个按钮

通常我们与导航头交互的方法就是点击位于标题左侧或者右侧的按钮。现在我们在导航头的右边添加一个按钮（这个地方也是你屏幕中最难触摸到的地方了）。

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

当我们用这种方式定义好按钮之后，这个this变量并不是指代HomeScreen实例。所以你不能通过this调用HomeScreen实例的setState和其他实例方法。那么接下来我们如何让按钮与screen组件互动呢？

导航头与屏幕组件的交互

我们需要使用navigation.setOptions来实现按钮与屏幕组件的交互。通过navigation.setOptions我们可以访问screen组件的属性，state,以及context等等

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, setCount]);

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

自定义返回按钮

createStackNavigator提供了平台默认的返回按钮。在IOS平台上，在按钮的旁边会有一个标签，这个标签会显示上一页标题的缩写，否则就是一个Back字样。

你可以通过设置headerBackTitle和headerTruncatedBackTitle来改变标签的行为。详细内容参见

想要定义返回按钮图标你可以使用headerBackImage

重写返回按钮

在堆栈导航器中，无论用户是否从当前页面返回到上一页，返回按钮都会被自动渲染，也就是说，无论何时，堆栈导航器所有页面的返回按钮都会被渲染。

通常情况下上面的已经可以满足你的需求，但是在有些情况下，你可能并不想通过配置iptions来设置返回按钮而是想重写一个返回按钮。这时候，你就要为headerLeft设置为React Element。headerRight也是一样。或者，headerLeft也可以接收一个React组件，比如，为了重写返回按钮的onPress行为。更详细的介绍请阅读相关API