无法在深层堆栈屏幕上自定义React Native标头标题

问题描述

美好的一天，

我有项目的概述

问题是，当我到达最后一级堆栈屏幕时，标题将不会出现。我以这种方式自定义标题。

在Bookings.jsx

return <>
    <Stack.Navigator>
        <Stack.Screen
            name='Assignments'
            component={Assignments}
            options={
                () => ({
                    title: 'My Assignments'
                })
            }
        />
        <Stack.Screen
            name='Daily'
            component={Daily}
            options={
                () => ({
                    title: 'Daily Bookings'
                })
            }
        />
        <Stack.Screen
            name='Info'
            component={Info}
            options={
                () => ({
                    title: 'Booking Information'
                })
            }
        />
    </Stack.Navigator>
</>

home.jsx

return <>
    <Tab.Navigator>
        <Tab.Screen name='Profile' component={Profile} />
        <Tab.Screen name='Bookings' component={Bookings}/>
    </Tab.Navigator>
</>

main.jsx

return (
    <NavigationContainer ref={RootNavigation.navigationRef}>
        <Stack.Navigator>
            <Stack.Screen
                name='Login'
                component={Login}
            />
            <Stack.Screen
                name='Home'
                component={Home}
                options={
                    ({ route }) => ({
                        title: route?.params?.title
                    })
                }
            />
        </Stack.Navigator>
    </NavigationContainer>
)

两者中的任何一种都不起作用。只有单词“ Home”作为标题出现。当我从“分配”到“每日”到“信息”之间切换时，它不会改变，这些最后一级的堆栈屏幕是按顺序排列的。

结构是否有错误？我花了几个小时，但没有运气。希望你们所有人都可以。谢谢。

解决方法

设置headerShow在较低级别的堆栈上显示。

来自https://reactnavigation.org/docs/stack-navigator/#headershown：

headerShown

显示还是隐藏屏幕标题。

默认情况下显示标题，除非：

导航器上的headerMode属性设置为none。

该屏幕位于一个嵌套在另一个带有标题的堆栈导航器屏幕中的堆栈中。 将此设置为false将隐藏标题。当标题隐藏在 嵌套堆栈，您可以将其显式设置为true来显示它。

,

感谢@Gilad给我一个提示。

现在可以了，我当时所做的是

我放在main.jsx上

<Stack.Navigator headerMode='none'>

然后在booking.jsx上，为每个添加以下选项

const renderTitle = (title) => {
    return <Text style={{ color: '#ff5c5c',fontSize: 16 }} >{title}</Text>
}

const renderBackIcon = (navigation) => (
    <View style={{ marginLeft: 20 }}>
        <FontAwesome5
            name='long-arrow-alt-left'
            size={20}
            onPress={() => navigation.goBack()}
            style={{ color: '#ff5c5c',padding: 5 }}
        />
    </View>
)

return <>
    <Stack.Navigator >
        <Stack.Screen
            name='MyAssignments'
            component={MyAssignments}
            options={
                () => ({
                    title: renderTitle('My Assignments'),headerLeft: () => null
                })
            }
        />
        <Stack.Screen
            name='DailyBookings'
            component={DailyBookings}
            options={
                ({ navigation }) => ({
                    title: renderTitle('Daily Bookings'),headerLeft: () => renderBackIcon(navigation)
                })
            }
        />
        <Stack.Screen
            name='BookingInformation'
            component={BookingInformation}
            options={
                ({ navigation }) => ({
                    title: renderTitle('Booking Information'),headerLeft: () => renderBackIcon(navigation)
                })
            }
        />
    </Stack.Navigator>
</>