createDrawerNavigator 不是 React Native 工作

Question

我尝试了很多东西来打开抽屉，但对我没有任何用处。我不明白如何像我一样组合导航器，一个是createStackNavigator，第二个是createDrawerNavigator.如果出现任何问题，请检查我的代码，请告诉我，否则请为我提供链接或代码来实现。谢谢

应用.js

import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './src/screens/LoginScreen';
import SignupScreen from './src/screens/SignupScreen';
import DashboardScreen from './src/screens/DashboardScreen';
import CaseListingScreen from './src/screens/CaseListingScreen';
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import SideBar from './src/SideBar';
const DrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardScreen,
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
}
},
{
initialRouteName: 'Home',
}
);
const AppNavigator = createStackNavigator({
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
header: null
}
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
header: null
}
}
});
export default createAppContainer(AppNavigator, DrawerNavigator);

仪表板屏幕.js

export default class DashboardScreen extends Component {
static navigationOption = {
drawerLabel: 'Home'
}
render() {
return (
<Container>
<Appbar.Header theme={{ colors: { primary: '#b33f3f' } }}>
<Appbar.Action icon="menu" onPress={() => this.props.navigation.navigate('DrawerOpen')} />
<Appbar.Content
title="Manage My Case"
subtitle="Dashboard"
/>
</Appbar.Header>
</Container>
);
}
}

Answer 1

在export default createAppContainer(AppNavigator, DrawerNavigator);中，您应该将抽屉导航器作为应用程序容器，而不是与应用程序导航器一起使用。 createAppContainer 只包含 1 个参数，因此在应用程序容器中传递 DrawerNavigator，如果您想在抽屉导航器中使用 stackNavigator，只需将抽屉导航器创建为 ，

const AppNavigator = createStackNavigator({
Dashboard: {
screen: DashboardScreen,
navigationOptions: {
header: null
}
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
Login: {
screen: LoginScreen,
navigationOptions: {
header: null
}
},
Signup: {
screen: SignupScreen,
navigationOptions: {
header: null
}
}
});

const DrawerNavigator = createDrawerNavigator({
Home: {
screen: DashboardScreen,
},
Cases: {
screen: CaseListingScreen,
navigationOptions: {
header: null
}
},
AppScreen:{
screen:AppNavigator // this is new , im adding stacknavigaoter to your drawer.
}
},
{
initialRouteName: 'Home',
}
);

export default createAppContainer(DrawerNavigator);

希望有帮助，否则随意怀疑。

Answer 2

在堆栈导航器中提及您的抽屉导航器，如下所示，

const myDrawerNavigator = createDrawerNavigator(
{
Home: { screen: YOUR_HOME },
},
{
contentComponent: SideMenu,
drawerWidth: Dimensions.get('window').width * 0.75
}
)
const RootStack = createStackNavigator({
SplashScreen: {
screen: SplashScreen,
navigationOptions: {
header: null,
},
},
SomeName: {
screen: myDrawerNavigator ,
navigationOptions: {
header: null,
},
},
})

根据您的屏幕名称修改上面的代码，它将正常工作...
我希望这有帮助，谢谢... :)