0

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

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 在某些屏幕上添加它之外，我在文档中没有找到相关的内容。有没有更简单的方法？

4

1 回答 1

1

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

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

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

这就是我用来做的：

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

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

于 2020-07-02T13:50:45.553 回答