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

Question

底部选项卡导航看起来像这样：

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 在某些屏幕上添加它。有没有更简单的方法？

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

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