为什么 React 从屏幕渲染 header 而不是组件？

Question

我正在为带有 expo 的应用程序的屏幕构建路由堆栈，自版本 5 以来，不再有切换导航器，所以我检查了文档，我基本上必须将所有屏幕置于三元条件下，这将使转变。 从技术上讲，是通过条件进行切换，但它没有渲染组件（但它渲染标题）

const Drawer = createDrawerNavigator();
const Stack = createNativeStackNavigator();
const isSignedIn = false

const PersonalAccessesStack = () => {
    <Stack.Navigator
        initialRouteName="MyPersonalAccessesScreen"
    >
        <Stack.Screen
            name="MyPersonalAccessesScreen"
            component={MyPersonalAccesses}
            options={{headerShown: false}}    
        />
        <Stack.Screen
            name="ChangePasswordSystemScreen"
            component={ChangePasswordSystem}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="EnterPinScreen"
            component={EnterPin}
            options={{headerShown: false}}
        />
    </Stack.Navigator>
}


const SpecialAccessesStack = () => {
    <Stack.Navigator
        initialRouteName="MySpecialAccessesScreen"
    >
        <Stack.Screen
            name="MySpecialAccessesScreen"
            component={MySpecialAccesses}
            options={{headerShown: false}}    
        />
        <Stack.Screen
            name="UnlockSpecialUserScreen"
            component={UnlockSpecialUser}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="ChangePasswordSpecialUserScreen"
            component={ChangePasswordSpecialUser}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="RequestAccessScreen"
            component={RequestAccess}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="PasswordHistoryScreen"
            component={PasswordHistory}
            options={{headerShown: false}}
        />
    </Stack.Navigator>
}


const TeamStack = () => {
    <Stack.Navigator
        initialRouteName="MyTeamScreen"
    >
        <Stack.Screen
            name="MyTeamScreen"
            component={MyTeam}
            options={{headerShown: false}}    
        />
        <Stack.Screen
            name="ChangePinScreen"
            component={ChangePin}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="ChangePasswordScreen"
            component={ChangePassword}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="UnlockUserAccountScreen"
            component={UnlockUserAccount}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="TimeExtensionScreen"
            component={TimeExtension}
            options={{headerShown: false}}
        />
    </Stack.Navigator>
}


const RequestStack = () => {
    <Stack.Navigator
        initialRouteName="MyRequestsScreen"
    >
        <Stack.Screen
            name="MyRequestsScreen"
            component={MyRequests}
            options={{headerShown: false}}    
        />
        <Stack.Screen
            name="RequestFilterScreen"
            component={RequestFilter}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="SystemRequestScreen"
            component={SystemRequest}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="SpecialUserRequestScreen"
            component={SpecialUserRequest}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="TransferRequestScreen"
            component={TransferRequest}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="SharedFolderRequestScreen"
            component={SharedFolderRequest}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="SpecialUserAccessRequestScreen"
            component={SpecialUserAccessRequest}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="DependencyTransferRequestScreen"
            component={DependencyTransferRequest}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="PermissionRequestScreen"
            component={PermissionRequest}
            options={{headerShown: false}}
        />
    </Stack.Navigator>
}

const DrawerStack = () => {
    <Drawer.Navigator screenOptions={{headerShown: false}} 
        initialRouteName="Home" 
        drawerContent={props => <DrawerContent {...props}/>}
    >
        <Drawer.Screen name="Home" component={Main}/>
        <Drawer.Screen name="Notifications" component={Notifications}/>
        <Drawer.Screen name="My Personal Accesses" component={PersonalAccessesStack}/>
        <Drawer.Screen name="My Special Accesses" component={SpecialAccessesStack}/>
        <Drawer.Screen name="My Team" component={TeamStack}/>
        <Drawer.Screen name="Requests" component={RequestStack}/>
        <Drawer.Screen name="Configuration" component={Configuration}/>
    </Drawer.Navigator>
}

const AuthenticationScreens = () => {
    <Stack.Navigator>
        <Stack.Screen
            name="LanguagePickerScreen"
            component={LanguagePicker}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="RegisterScreen"
            component={Register}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="ChooseCompanyScreen"
            component={ChooseCompany}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="RegisterManualScreen"
            component={RegisterManual}
            options={{headerShown: false}}
        />
        <Stack.Screen
            name="WaitForApprovalScreen"
            component={WaitForApproval}
            options={{headerShown: false}}
        />

    </Stack.Navigator>
}


function Root() {
    return (
        /* todo el return encerrado por un ternario si no se logueo (que renderice autenticacion)
        si está logueado al drawer */
        <>
            <NavigationContainer>
                <Stack.Navigator>
                    {isSignedIn ? 
                        <Stack.Screen
                            name="Drawer"
                            component={DrawerStack}
                        />
                    :
                        <Stack.Screen
                            name="Auth"
                            component={AuthenticationScreens}
                        />
                    
                    }
                </Stack.Navigator>
            </NavigationContainer>
            
        </>
    )
}

export default Root;

我仍在与这种新的切换方法作斗争，它看起来很简单，但仍然对我不起作用，可能我放置了很多屏幕？

Answer 1

尝试将

<NavigationContainer>

函数的

Root

包装在

<View style={{flex:1}}>

中而不是

<>

或删除包装器

<>

。

  function Root() {
    return (
      /* todo el return encerrado por un ternario si no se logueo (que renderice autenticacion)
        si está logueado al drawer */

      <NavigationContainer>
        <Stack.Navigator>
          {isSignedIn ? (
            <Stack.Screen name="Drawer" component={DrawerStack} />
          ) : (
            <Stack.Screen name="Auth" component={AuthenticationScreens} />
          )}
        </Stack.Navigator>
      </NavigationContainer>
    );
  }