My Drawer opens but does not display pages, such as displaying my pages in Drawer Navigator (React Native)

Question

I’m using the React Navigation v4. I created an Routes file to redirect my pages. But I have a problem: I created a Drawer Navigator, and it is being displayed, but when it opens, it only shows the first screen, which in the case is "Lagoaguia" and the next pages do not appear. How do I correct this error? The code snippet is this below:

const Routes = createAppContainer(
  createDrawerNavigator(
    {
      LagoaGuia: {
        screen: Menus,
      },
      Acougue: {
        screen: Acougue,
      },
    },
    {
      drawerBackgroundColor: "#222",
    }
  )
);

Answer 1

Iae, I’ll give you a simple example...

const FairScreenStack = createStackNavigator({
    MainScreen: {
        screen: FairScreen,
        navigationOptions: ({ navigation }) => ({
            gesturesEnabled: false,
            header: (
                <Header
                    color="#ea7715"
                    openDrawer={() => {
                        navigation.openDrawer();
                    }}
                />
            ),
        }),
    },
});

const MapScreenStack = createStackNavigator({
    MainScreen: {
        screen: MapScreen,
        navigationOptions: ({ navigation }) => ({
            gesturesEnabled: false,
            header: (
                <Header
                    color="#da0652"
                    openDrawer={() => {
                        navigation.openDrawer();
                    }}
                />
            ),
        }),
    },
});

const DrawerNav = createDrawerNavigator(
    {
        Fair: {
            screen: FairScreenStack,
        },
        Map: {
            screen: MapScreenStack,
        },
    },
    {
        contentComponent: menuSide,
        drawerWidth: 250,
        initialRouteName: 'Fair',
    }
);

export default DrawerNav;

My menu screen is as follows...

class sideMenu extends Component {
    render() {
        return (
            <View style={{ marginTop: 170, marginBottom: 20 }}>
                <Button
                    title={'FEIRA'}
                    titleStyle={{ paddingLeft: 20 }}
                    icon={
                        <Image source={require('../../assets/iconemenu.png')}
                            style={{ width: 16, height: 16 }} />
                    }
                    buttonStyle={{
                        backgroundColor: 'transparent',
                        borderRadius: 10,
                        padding: 5,
                        paddingLeft: 10,
                        elevation: 0,
                    }}
                    containerStyle={style.sideMenu.menuItens}
                    onPress={() => this.props.navigation.navigate('Fair')}
                />
                <Button
                    title={'MAPA DA FEIRA'}
                    titleStyle={{ paddingLeft: 20 }}
                    icon={
                        <Image source={require('../../assets/MapadaFeira.png')}
                            style={{ width: 16, height: 16 }} />
                    }
                    buttonStyle={{
                        backgroundColor: 'transparent',
                        borderRadius: 10,
                        padding: 5,
                        paddingLeft: 10,
                        elevation: 0,
                    }}
                    containerStyle={style.sideMenu.menuItens}
                    onPress={() => this.props.navigation.navigate('Map')}
                />
            </View>
        );
    }
}

export default sideMenu;