如何使用react navigation 5实现嵌套导航（StackNavigator、DrawerNavigator）

Question

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

函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用这个函数而不是返回它。

我的 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;

非常感谢你们的帮助。

Answer 1

我找到了正确答案： 组件而不是来自渲染

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

Answer 2

您没有返回 jsx，而只是将它放在函数体中。但是如果你不想手动写return，那么使用这个语法：const component = () => (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;

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

Answer 3

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

function AuthenticatedDriverScreen() {

到

const AuthenticatedDriverScreen= () => { 

Answer 4

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

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;