React Navigation仅渲染Header不渲染组件问题排查（Expo环境）

你的核心问题是所有自定义路由栈组件都没有返回JSX内容，函数组件必须明确返回要渲染的元素，否则只会渲染外层导航的Header，内部组件内容无法显示。

具体修改点 #

所有像PersonalAccessesStack、SpecialAccessesStack这类路由栈组件，都需要把内部的Stack.Navigator用return包裹，或者使用箭头函数的隐式返回（将JSX放在圆括号里）。

示例修改（以PersonalAccessesStack为例） #

原代码：

const PersonalAccessesStack = () => {
    <Stack.Navigator
        initialRouteName="MyPersonalAccessesScreen"
    >
        {/* 屏幕配置 */}
    </Stack.Navigator>
}

修改后（二选一即可）：

1. 显式return：

const PersonalAccessesStack = () => {
    return (
        <Stack.Navigator
            initialRouteName="MyPersonalAccessesScreen"
        >
            {/* 屏幕配置 */}
        </Stack.Navigator>
    )
}

2. 箭头函数隐式返回：

const PersonalAccessesStack = () => (
    <Stack.Navigator
        initialRouteName="MyPersonalAccessesScreen"
    >
        {/* 屏幕配置 */}
    </Stack.Navigator>
)

需要对以下所有组件做相同修改：

• PersonalAccessesStack
• SpecialAccessesStack
• TeamStack
• RequestStack
• DrawerStack
• AuthenticationScreens

额外优化建议 #

• 在Root组件的外层Stack.Navigator中添加screenOptions={{headerShown: false}}，避免出现多余的默认Header：

<Stack.Navigator screenOptions={{headerShown: false}}>
    {/* 三元条件渲染的屏幕 */}
</Stack.Navigator>

• 实际项目中isSignedIn应该用状态管理（比如useState）来动态控制，而不是固定常量，这样登录状态变化时路由能自动切换。

内容的提问来源于stack exchange，提问作者Franco