抽屉导航

Question

我安装了所有依赖项和包。其中不存在任何错误。我的抽屉导航不起作用。请给我一些有用的提示。我被困住了。它没有按预期工作。基本上我有两个导航文件和应用程序文件，如下所示。

这是 Navigation.js 文件的代码：

import "react-native-gesture-handler";
import { NavigationContainer } from "@react-navigation/native";
import { View, TouchableOpacity, Text } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome';
import { createStackNavigator } from '@react-navigation/stack';
import { RootSiblingParent } from 'react-native-root-siblings';
import SignIn from '../Screens/SignIn';
import Home from '../Screens/Home';
import ForgotPassword from '../Screens/ForgotPassword';
import ChangePassword from '../Screens/ChangePassword';
import {
    createDrawerNavigator,
    DrawerContentScrollView,
    DrawerItemList,
  } from '@react-navigation/drawer';

  const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const CustomDrawer = props => {
    return (
      <View style={{ flex: 1 }}>
        <DrawerContentScrollView {...props}>
          <View
            style={{
             alignSelf:"center",
              padding: 20,
  
            }}
          >
            <View>
              <Text style={{fontSize:18,fontWeight:"bold"}}>BusGo Captain App</Text>
            </View>
           
          </View>
          <DrawerItemList {...props} />
        </DrawerContentScrollView>
        <TouchableOpacity
          style={{
            position: 'absolute',
            right: 0,
            left: 0,
            bottom: 50,
            backgroundColor: '#f6f6f6',
            padding: 20,
          }}
        >

        </TouchableOpacity>
      </View>
    );
  };
  function DrawerRoutes(){

  
    return(
      
      <Drawer.Navigator initialRouteName="Home"
     
        drawerContent={props => <CustomDrawer {...props} />}
      >
      
        <Drawer.Screen name="Home" component={Home} 
          
          options={{
            headerShown: false ,
            title:'Home',
            drawerIcon:({focused,size})=>(
              <Icon
              name="home"
              size ={size}   
                color='black'
                
              />
              
            )
          }}
        />
        
       
      </Drawer.Navigator>
    );
  }

function Navigation() {
    return (
        <RootSiblingParent>
            <Stack.Navigator>
                <Stack.Screen name="SignIn" component={SignIn} />
                
                <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
                <Stack.Screen name="ChangePassword" component={ChangePassword} />
                <Stack.Screen name="DrawerRoutes" component={DrawerRoutes} />
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </RootSiblingParent>
    );
}

export default Navigation;

这是 app.js 文件，它是主文件。 App.js：

import { NavigationContainer } from '@react-navigation/native';
import Navigation from './Src/Navigation/Navigation'


export default function App() {
  return (
    <NavigationContainer>
      <Navigation />
    </NavigationContainer>
  );
}

Answer 1

抽屉正在工作，你只需要去抽屉屏幕， 添加以下代码以转到抽屉屏幕，单击SignIn

后检查抽屉

const SignIn = (props) => {
  return (
    <>
      <TouchableOpacity
        onPress={() => {
          props.navigation.navigate('DrawerRoutes');
        }}>
        <Text>SignIn</Text>
      </TouchableOpacity>
    </>
  );
};

如果需要抽屉在第一屏，先放抽屉屏

function Navigation() {
    return (
        <RootSiblingParent>
            <Stack.Navigator>
                <Stack.Screen name="DrawerRoutes" component={DrawerRoutes} />
                <Stack.Screen name="SignIn" component={SignIn} />
                
                <Stack.Screen name="ForgotPassword" component={ForgotPassword} />
                <Stack.Screen name="ChangePassword" component={ChangePassword} />
                <Stack.Screen name="Home" component={Home} />
            </Stack.Navigator>
        </RootSiblingParent>
    );
}