createDrawerNavigator在本机上不起作用

Question

我尝试了很多事情来打开抽屉，但对我没有任何作用。我不知道如何像我一样组合导航器，一个是createStackNavigator，第二个是createDrawerNavigator。如果有任何问题，请检查我的代码，以便让我知道，否则请提供一个链接或要实现的代码。谢谢

App.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);

DashboardScreen.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,
    },
  },
})

根据您的屏幕名称修改上面的代码，它将正常工作...希望对您有所帮助...：）