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

【问题标题】：React Native header title can't be customized on deep level stack screens无法在深层堆栈屏幕上自定义 React Native 标题标题
【发布时间】：2020-09-24 09:21:57
【问题描述】：

早安，

我有项目的概述

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

在 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 显示为标题标题。当我从“作业”导航到“每日”到“信息”时，它不会改变，这些最后一级堆栈屏幕是按顺序排列的。

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

【问题讨论】：

标签： react-native header screen customization title

【解决方案1】：

在底层堆栈上设置 headerShown。

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

标题显示

是否显示或隐藏屏幕标题。

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

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

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

【讨论】：

谢谢你给我提示，我真的很感激。但是，我只使用 headerMode 而不是 headerShown。

【解决方案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>
</>

【讨论】：