Reactjs 如何使用react navigation 5实现嵌套导航（StackNavigator、抽屉导航器）

我有一个模块，我需要在LoginScreen中使用堆栈导航器，但是当用户成功登录抽屉导航器时，它将实现而不是堆栈导航器。现在我有一个错误，上面写着

函数作为子函数无效。如果返回组件而不是从渲染返回组件，则可能会发生这种情况。或者你是想调用这个函数而不是返回它

我的app.js上有什么

    const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const UnauthenticatedScreen = () => {   
        <Stack.Navigator>
                <Stack.Screen 
                    name="Login" 
                    component={Login} 
                    options=
                    {{
                        headerShown: false,
                    }}
                />
                <Stack.Screen 
                    name="Registration" 
                    component={Register} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTintColor:'#fff',
                    }}
                
                />

                <Stack.Screen 
                    name="Privacy" 
                    component={PrivacyPolicy} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTitle:'Privacy Policy',
                        headerTintColor:'#fff',
                    }}
                />

                <Stack.Screen
                    name="RegistrationSuccess"
                    component={RegistrationSuccess}
                    options=
                    {{
                        headerShown: false,
                    }}
                />
        </Stack.Navigator>

}

function AuthenticatedDriverScreen() {
    <Drawer.Navigator initialRouteName="DriverDashboard">
      <Drawer.Screen
        name="DriverDashboard"
        component={DriverDashboard}
        options={{ drawerLabel: 'Home' }}
      />
    </Drawer.Navigator>
}

function App() {
    const isLogin = false;
    return (
        <NavigationContainer>
         {isLogin ? AuthenticatedDriverScreen : UnauthenticatedScreen}
        </NavigationContainer>

    )
}
  
export default App;

const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
const unauthenticated screen=（）=>{
}
函数authenticatedDriversScreen（）{
}
函数App（）{
const isLogin=false；
返回(
{isLogin？AuthenticatedDriversScreen:UnauthenticatedScreen}
)
}
导出默认应用程序；

---

非常感谢您的帮助。

您并没有返回jsx，而是在函数体中对其进行访问。但如果您不想手动编写return，那么使用以下语法：constcomponent=（）=>（jsx）

如果您懒惰，只需复制粘贴固定代码：

   const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const UnauthenticatedScreen = () => (
        <Stack.Navigator>
                <Stack.Screen 
                    name="Login" 
                    component={Login} 
                    options=
                    {{
                        headerShown: false,
                    }}
                />
                <Stack.Screen 
                    name="Registration" 
                    component={Register} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTintColor:'#fff',
                    }}
                
                />

                <Stack.Screen 
                    name="Privacy" 
                    component={PrivacyPolicy} 
                    options={{
                        headerStyle: {
                            backgroundColor: '#4ABDFF'
                        },
                        headerTitleStyle: {
                            color: '#fff',
                        },
                        headerTitle:'Privacy Policy',
                        headerTintColor:'#fff',
                    }}
                />

                <Stack.Screen
                    name="RegistrationSuccess"
                    component={RegistrationSuccess}
                    options=
                    {{
                        headerShown: false,
                    }}
                />
        </Stack.Navigator>

)

function AuthenticatedDriverScreen() {
    return (<Drawer.Navigator initialRouteName="DriverDashboard">
      <Drawer.Screen
        name="DriverDashboard"
        component={DriverDashboard}
        options={{ drawerLabel: 'Home' }}
      />
    </Drawer.Navigator>)
}

function App() {
    const isLogin = false;
    return (
        <NavigationContainer>
         {isLogin ? AuthenticatedDriverScreen : UnauthenticatedScreen}
        </NavigationContainer>

    )
}
  
export default App;

const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
const unauthenticated screen=（）=>(
)
函数authenticatedDriversScreen（）{
返回(
)
}
函数App（）{
const isLogin=false；
返回(
{isLogin？AuthenticatedDriversScreen:UnauthenticatedScreen}
)
}
导出默认应用程序；

我还没有测试代码，但它应该可以工作。如果没有，请说。

尝试更改（我还没有测试，请告诉我结果）

到

---

我找到了正确的答案： 组件，而不是从渲染

<NavigationContainer>
         {isLogin ? <AuthenticatedDriverScreen/> : <UnauthenticatedScreen/>}
</NavigationContainer>

{isLogin？：}

创建根堆栈容器和抽屉容器。若要在堆栈容器中显示抽屉，请将组件指定为抽屉容器

import * as React from 'react';    
import { Button,SafeAreaView, View, Platform,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator,TransitionPresets } from '@react-navigation/stack';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';
import { HeaderBackButton } from '@react-navigation/stack';


import { Provider } from 'react-redux';
import { store } from './src/redux/store/store';

import {appColor} from './src/helper/constants'
//screens
import {Splash} from './src/screen/Splash'
import {Login} from './src/screen/Login'
import {ForgotPassword} from './src/screen/ForgotPassword'
import {Register} from './src/screen/Register'
import {Home} from './src/screen/Home'
import {SideMenu} from './src/screen/Drawer'
import {MyRewards,SubCategorieslist} from './src/screen/MyRewards'
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

const Stack = createStackNavigator();

function App() {

  
  const RootStack = () =>{

  return (
    <Stack.Navigator style = {{flex:1}}>

      <Stack.Screen name="SplashScreen" component={Splash}  options={{headerShown: false}}/>
      <Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
      
      <Stack.Screen name ="Dashboard" component ={DrawerStack} options={{headerShown: false}}/>
     

      </Stack.Navigator>
    )
  }
  const DrawerStack = () =>{

    return(
    <Drawer.Navigator 
    drawerStyle={{width:300}}
    drawerType="slide"
    screenOptions={{
      headerStyle: {
        backgroundColor: appColor,
      },
      headerShown:true,
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    drawerContent={props => <SideMenu {...props} />}>
      <Drawer.Screen name="Home" component={Home} />
  
      <Drawer.Screen name="MyRewards" component={MyRewards} options={{title:'My Rewards'}} />   
      <Drawer.Screen name="SubCategorieslist" component={SubCategorieslist} options= {({ navigation }) => ({title:'Sub-Categories',headerLeft: (props) => (<HeaderBackButton {...props} onPress={()=>{navigation.goBack(null)}}/>)})} />   
      
           
      </Drawer.Navigator>
    )

  }



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

    <Provider store={store}>
    <NavigationContainer>
     <RootStack/>
    </NavigationContainer>
    
     </Provider>
    </View>
  );
}

export default App;

import*as React from'React'；
从“react native”导入{按钮、安全区域视图、视图、平台、文本}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator，TransitionPresets}；
从“react native键盘附件”导入{KeyboardAccessoryNavigation}；
从'@react导航/stack'导入{HeaderBackButton}；
从'react redux'导入{Provider}；
从“./src/redux/store/store”导入{store}；
从“./src/helper/constants”导入{appColor}
//屏风
从“./src/screen/Splash”导入{Splash}
从“./src/screen/Login”导入{Login}
从“./src/screen/ForgotPassword”导入{ForgotPassword}
从“./src/screen/Register”导入{Register}
从“./src/screen/Home”导入{Home}
从“./src/screen/Drawer”导入{SideMenu}
从“./src/screen/MyRewards”导入{MyRewards，子类别列表}
从'@react导航/drawer'导入{createDrawerNavigator}；
const Drawer=createDrawerNavigator（）；
const Stack=createStackNavigator（）；
函数App（）{
常量根堆栈=（）=>{
返回(
)
}
const DrawerStack=（）=>{
返回(
}>
（{title:'Sub-Categories'，headerLeft:（props）=>（{navigation.goBack（null）}}/>）}/>
)
}
返回(
);
}
导出默认应用程序；

hi@Ken Lee相同错误。抱歉，我刚刚修改了我的答案（之前重复的声明），我得到了相同的错误。据我所知，如果用户未登录，您希望使用正常导航，但如果用户已登录，则使用抽屉导航。我说得对吗？是的，你说得对。如果用户未登录。用户将使用UnauthenticatedScreen，否则AuthenticatedDriverScreenSame错误提供代码。@DevGe是否提供有关错误位置的任何信息

<NavigationContainer>
         {isLogin ? <AuthenticatedDriverScreen/> : <UnauthenticatedScreen/>}
</NavigationContainer>

import * as React from 'react';    
import { Button,SafeAreaView, View, Platform,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator,TransitionPresets } from '@react-navigation/stack';
import { KeyboardAccessoryNavigation } from 'react-native-keyboard-accessory';
import { HeaderBackButton } from '@react-navigation/stack';


import { Provider } from 'react-redux';
import { store } from './src/redux/store/store';

import {appColor} from './src/helper/constants'
//screens
import {Splash} from './src/screen/Splash'
import {Login} from './src/screen/Login'
import {ForgotPassword} from './src/screen/ForgotPassword'
import {Register} from './src/screen/Register'
import {Home} from './src/screen/Home'
import {SideMenu} from './src/screen/Drawer'
import {MyRewards,SubCategorieslist} from './src/screen/MyRewards'
import { createDrawerNavigator } from '@react-navigation/drawer';
const Drawer = createDrawerNavigator();

const Stack = createStackNavigator();

function App() {

  
  const RootStack = () =>{

  return (
    <Stack.Navigator style = {{flex:1}}>

      <Stack.Screen name="SplashScreen" component={Splash}  options={{headerShown: false}}/>
      <Stack.Screen name="Login" component={Login} options={{headerShown: false}}/>
      
      <Stack.Screen name ="Dashboard" component ={DrawerStack} options={{headerShown: false}}/>
     

      </Stack.Navigator>
    )
  }
  const DrawerStack = () =>{

    return(
    <Drawer.Navigator 
    drawerStyle={{width:300}}
    drawerType="slide"
    screenOptions={{
      headerStyle: {
        backgroundColor: appColor,
      },
      headerShown:true,
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    }}
    drawerContent={props => <SideMenu {...props} />}>
      <Drawer.Screen name="Home" component={Home} />
  
      <Drawer.Screen name="MyRewards" component={MyRewards} options={{title:'My Rewards'}} />   
      <Drawer.Screen name="SubCategorieslist" component={SubCategorieslist} options= {({ navigation }) => ({title:'Sub-Categories',headerLeft: (props) => (<HeaderBackButton {...props} onPress={()=>{navigation.goBack(null)}}/>)})} />   
      
           
      </Drawer.Navigator>
    )

  }



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

    <Provider store={store}>
    <NavigationContainer>
     <RootStack/>
    </NavigationContainer>
    
     </Provider>
    </View>
  );
}

export default App;