使用 React Navigation 为每个底部选项卡添加一个后退按钮答案

【问题标题】：Adding a back button for each bottom tab with React Navigation使用 React Navigation 为每个底部选项卡添加一个后退按钮
【发布时间】：2020-07-02 12:34:08
【问题描述】：

底部的标签导航看起来像这样：

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

收藏夹和搜索屏幕上没有返回按钮。我想这是正常行为，但我很想拥有一个。

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

【问题讨论】：

标签： react-native react-navigation react-navigation-bottom-tab

【解决方案1】：

在我的项目中，我喜欢创建自定义标头，并且我不显示默认标头并显示我自己的自定义标头组件。

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

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

这就是我的习惯：

const screenOptions = {
  headerShown: false
};


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

然后创建我自己的组件

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

这样做，您可以自定义标题上的所有内容，这对我来说就像一个魅力。

【讨论】：