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

Question

美好的一天，

我有项目概况

问题是，当我到达最后一层堆栈屏幕时，标题不会出现。我这样自定义标题。

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

两者都行不通。只有“主页”一词显示为 header 标题。当我从“作业”导航到“每日”再到“信息”时，它不会改变，这些最后一级堆栈屏幕是按顺序排列的。

结构有问题吗？我花了几个小时在这上面但没有运气。希望你们中的任何一个都可以。谢谢。

Answer 1

将 headerShown 设置在较低级别的堆栈上。

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

headerShown

Whether to show or hide the header for the screen.

The header is shown by default unless:

The headerMode prop on the navigator was set to none.

The screen is in a stack nested in another stack navigator's screen which has a header. Setting this to false hides the header. When the header is hidden in a nested stack, you can explicitly set it to true to show it.

Answer 2

感谢@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>
</>

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

React Native header title can't be customized on deep level stack screens

customization

screen

header

title

react-native