React Native我们如何在堆栈头中使用抽屉导航

Question

我正在使用React导航vs，并且我想在堆栈导航中使用抽屉式导航，因为我已经在项目中添加了堆栈导航 但我想从不在登录屏幕上的仪表板开始抽屉式导航

App.js

import Start from './App/Navigation/StackNavigation'
export default  class App extends React.Component{

  constructor(){

    super();

    global.DomainName = 'http://testing.njtennis.net/';
  }
  render() {

    return (  
    <Start/>

    )

在堆栈导航器屏幕上查看

import { createDrawerNavigator,DrawerContentScrollView,DrawerItemList,DrawerItem,
  } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
// import { createDrawerNavigator } from '@react-navigation/drawer';
import LoginView from  '../../App/component/Views/Login'
import Test from  '../../App/component/Test'


  import SignUpView from '../../App/component/Views/Signup';
import Dashboard from '../../App/component/Views/Dashboard/Dashboard';
const Stack = createStackNavigator();

 <NavigationContainer style={{ backgroundColor: '#FFFFFF' }}>
      <Stack.Navigator>

        <Stack.Screen name=" " component={FirstPage}   
         options={{
          headerShown:false,

        }}
         />
        <Stack.Screen name="Login" component={LoginView}
          options={{

            headerStyle: {
              backgroundColor: '#88aa31',
            },
           headerTintColor: '#fff',

          }} />

         <Stack.Screen name="Signup" component={SignUpView}
          options={{

            headerStyle: {
              backgroundColor: '#88aa31',
            },
            headerTintColor: '#fff',
          }} />
         <Stack.Screen name="Dashboard" component={Dashboard}

          options={{

         // headerTitle:()=> <Header   title={"Dashboard"}/>,
            headerStyle: {
              backgroundColor: '#88aa31',
            },
            headerLeft: null,
              }} />
</NavigationContainer>

我可以添加标题和抽屉导航吗？

Answer 1

我已经为react native创建了粗糙的身份验证流程。在App.js内部，我创建了NavigationContainer，在其中内部，我具有DrawerScreen (Screen after login)和AuthScreen (Screen before login)。认证状态由isLogin维护。

根据需要在DrawerNavigation和LoginStack中添加受尊敬的Screen。
该代码是伪代码。

App.js

return (
   <NavigationContainer>
       { isLogin ? <DrawerNavigation /> : <AuthStackScreen /> }
   </NavigationContainer>
)

Drawer.js

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

export default function DrawerNavigation() {
  return (
    <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
    </Drawer.Navigator>
  );
}

LoginStack.js

import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator();

export default function AuthStackScreen() {
  return (
       <Stack.Navigator>
        <Stack.Screen name=" " component={FirstPage}   
         options={{
          headerShown:false,

        }}
         />
        <Stack.Screen name="Login" component={LoginView}
          options={{

            headerStyle: {
              backgroundColor: '#88aa31',
            },
           headerTintColor: '#fff',

          }} />
       <Stack.Navigator>
  );
}