React native 使用React导航为每个底部选项卡添加后退按钮

底部选项卡导航的外观如下所示：

const Tab = createBottomTabNavigator();

export default function TabStackScreen() {
    return (
        <Tab.Navigator initialRouteName="Home">
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen name="Favorites" component={FavoritesStackScreen} />
            <Tab.Screen name="Search" component={SearchStackScreen} />
        </Tab.Navigator>
    )
}

const Tab=createBottomTabNavigator（）；
导出默认函数TabStackScreen（）{
返回(
)
}

收藏夹和搜索屏幕上没有后退按钮。我想这是正常的行为，但我想有一个

---

我没有在文档中找到相关内容，只是重新创建了一个看起来像本机后退按钮的组件，并使用headerLeft将其添加到一些屏幕上。有更简单的方法吗？

在我的项目中，我喜欢创建自定义标题，而不显示默认标题和我自己的自定义标题组件

在我的自定义组件上，我添加了右组件和左组件，并让屏幕决定要做什么，默认情况下会显示后退按钮，但如果屏幕通过noBack属性，则按钮会隐藏

您还可以添加正确的组件，例如关闭按钮

这就是我过去常做的：

const screenOptions = {
  headerShown: false
};


<RootStack.Navigator screenOptions={screenOptions} mode="modal">

const屏幕选项={
校长：错
};

然后创建我自己的组件

export const Header = ({ title, leftComponent, rightComponent, noBack }) => {
  const navigation = useNavigation();

  return (
    <Wrapper>
      {leftComponent ||
        (noBack ? (
          <Placeholder />
        ) : (
          <Button
            onPress={() => navigation.goBack()}
            accessible
            accessibilityRole="button"
            accessibilityLabel="Back">
            <Icon
              size={30}
              name={Platform.OS === 'android' ? 'arrow-left' : 'chevron-left'}
            />
          </Button>
        ))}
      <Title bold accessibilityRole="header" acessible acessibilityText={title}>
        {title}
      </Title>
      {rightComponent || <Placeholder />}
    </Wrapper>
  );
};

export const Header=（{title，leftComponent，righComponent，noBack}）=>{
const navigation=useNavigation（）；
返回(
{leftComponent||
（诺巴克(
) : (
navigation.goBack（）}
可到达的
accessibilityRole=“按钮”
accessibilityLabel=“Back”>
))}
{title}
{rightComponent | |}
);
};

这样做，你就可以自定义你的标题上的一切，它的作品像一个魅力为我