Реагировать на родной createDrawerNavigator не работает

Question

Не могли бы вы помочь мне в этом небольшом вопросе.

Я очень новичок в React native, и здесь я тренируюсь в обучении реагированию на навигацию. Моя проблема в том, что навигатор ящика не работает, когда я пытаюсь поменять местами слева направо. Но нижний навигатор работает. Любая идея, что не так с этим, пожалуйста.

Также: если вы можете, пожалуйста, пришлите мне хороший образец, чтобы изучить эту область. У меня есть некоторые образцы, но большинство образцов устарели.

MyCode:

import React from 'react';
import {TouchableOpacity, View, Text, Image} from 'react-native';

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createDrawerNavigator} from 'react-navigation-drawer';

import HomeScreen2 from '../screens/HomeScreen2';
import HomeScreen from '../screens/HomeScreen';
import Setup from '../screens/Setup';


const HomeStack = createStackNavigator(
    {
      //Defination of Navigaton from home screen
      Home: { screen: HomeScreen },
     // Details: { screen: ProfileScreen },
    },
    {
      defaultNavigationOptions: {
        //Header customization of the perticular Screen
        headerStyle: {
          backgroundColor: '#42f44b',
        },
        headerTintColor: '#FFFFFF',
        title: 'Home',
        //Header title
      },
    }
  );

  const SettingsStack = createStackNavigator(
    {
      //Defination of Navigaton from setting screen
      Settings: { screen: Setup },
    },
    {
      defaultNavigationOptions: {
        //Header customization of the perticular Screen
        headerStyle: {
          backgroundColor: '#42f44b',
        },
        headerTintColor: '#FFFFFF',
        title: 'Settings',
        //Header title
      },
    }
  );

  const TabMain = createBottomTabNavigator(
    {
        TAB1: HomeStack,
        TAB2: SettingsStack,
    },
    {
      initialRouteName: 'TAB1',
    }
  )


  const DrawHomeView = createStackNavigator({
    HomeV: {screen: HomeScreen2}},
     {
      headerMode: 'float',
      navigationOptions: ({navigation}) => ({
          headerStyle: {
              backgroundColor: 'rgb(255,45,85)',
              paddingLeft: 10,
              paddingRight: 10
          },
          title: 'Map View',
          headerTintColor: 'white',
          headerLeft: <View>
              <TouchableOpacity
                  onPress={() => {
                      if (navigation.state.isDrawerOpen === false) {
                          navigation.dispatch(DrawerActions.openDrawer());
                      } else {
                          navigation.dispatch(DrawerActions.closeDrawer());
                      }
                  }}>
                  <Text>Menu</Text>
              </TouchableOpacity>
          </View>
      })
  });

  const DrawSettingsView = createStackNavigator({
    SettingsV: {screen: Setup}},
     {
      headerMode: 'float',
      navigationOptions: ({navigation}) => ({
          headerStyle: {
              backgroundColor: 'rgb(255,45,85)',
              paddingLeft: 10,
              paddingRight: 10
          },
          title: 'Map View',
          headerTintColor: 'white',
          headerLeft: <View>
              <TouchableOpacity
                  onPress={() => {
                      if (navigation.state.isDrawerOpen === false) {
                          navigation.dispatch(DrawerActions.openDrawer());
                      } else {
                          navigation.dispatch(DrawerActions.closeDrawer());
                      }
                  }}>
                  <Text>Menu</Text>
              </TouchableOpacity>
          </View>
      })
  });


  const TabMain2 = createDrawerNavigator(
    {
        TAB3: DrawHomeView,
        TAB4: DrawSettingsView,
    },
    {
      initialRouteName: 'TAB3',
    }
  )


export default createAppContainer(createSwitchNavigator(
    {
      Sub1: TabMain,
      Sub2: TabMain2,
    },
    {
      initialRouteName: 'Sub2',
    }
  ));

Answer 1

Хорошо. После того, как вы немного поигрались с вашим кодом и документами: https://reactnavigation.org/docs/nesting-navigators/ и, пожалуйста, прочитайте документы и попробуйте их примеры, так как они превосходно описательны и доступны для исполнения в режиме реального времени на закуску.

Для Вторая часть вопроса, я собрал для вас пример:

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
//Import necessary components  



//Create Screens, Dummy screens in this case.
function NotificationsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => navigation.goBack()} title="Go back home" />
    </View>
  );
}
function Feed ({ navigation, route }) {
 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{fontSize: 40}}>Feed </Text>
  </View>  
);}

 function Home ({ navigation, route }) {
 return (
  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    <Text style={{fontSize: 40}}> Home </Text>
  </View>  
);}




 // Here is your questions answer, just create a Bottom Navigator  
 // and a Drawer Navigator and nest them in each other after declaring your  
 // screens.

const Tab = createBottomTabNavigator();
const Drawer = createDrawerNavigator();

function HomeScreen({ navigation }) {
  return (
  <Tab.Navigator>
      //Put your Tab screens here.
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
    </Tab.Navigator>

  );
}


export default function App() {
  return (
    // For the main export create a navigation container and declare the 
    // Drawer Navigator inside the main navigation container, then use that to
    // To Access your Tab navigator "HomeScreen" and put whatever else you 
    // Want in your Drawer Navigator. 
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>


    </NavigationContainer>
  );
}

Объяснение: Вы можете вкладывать навигаторы только друг в друга, а не в основной контейнер навигации.

Этот код был протестирован с использованием expo-cli 3.18.4