React Native 中的堆栈导航和抽屉导航答案

【问题标题】：Stack navigation and Drawer navigation in React NativeReact Native 中的堆栈导航和抽屉导航
【发布时间】：2019-10-31 11:35:50
【问题描述】：

在我的应用程序中，我有导航到其他屏幕的按钮，我的抽屉也有按钮，我做了抽屉，它工作正常，也做了堆栈导航，也工作正常，但是在我的 app.js 中，当我定义其中一个（抽屉或堆栈）另一个不工作时，我将提供我的代码，我认为问题是我分别为它们声明了createAppContainer，我如何在它们之间结合？这是我的代码：

Root.js：

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";

import Main from "./Main.js";
import Signup from "./Signup.js";
import Home from "./Home.js";
import CardDetails from "./CardDetails";
import Profile from "./Profile";

const MainNavigator = createStackNavigator(
  {
    Main: { screen: Main },
    Profile: { screen: Profile },
    Signup: { screen: Signup },
    Home: { screen: Home },
    CardDetails: { screen: CardDetails },
  },
  {
    initialRouteName: "Main",
    navigationOptions: {
      header: null
    },
    initialRouteParams: {
      navigationMode: true
    }
  }
);

const Root = createAppContainer(MainNavigator);

export default Root;

DrawerNavigator.js：

import React from "react";
import { Platform, Dimensions } from "react-native";
import { createAppContainer } from "react-navigation";
import { createDrawerNavigator } from "react-navigation-drawer";

import MyProduct from "../Containers/MyProduct";
import Home from "../Containers/Home";
import Profile from "../Containers/Profile";
import Main from "../Containers/Main";
import Signup from "../Containers/Signup.js";
import MenuDrawer from "../Components/MenuDrawer";

const { width, height } = Dimensions.get("window");

const DrawerConfig = {
  drawerWidth: width * 0.83,
  contentComponent: ({ navigation }) => {
    return <MenuDrawer navigation={navigation} />;
  }
};
export const DrawerNavigator = createDrawerNavigator(
  {
    MyProduct: {
      screen: MyProduct
    },
    Profile: {
        screen: Profile
      },
      Main: {
        screen: Main
      },
      Home: {
        screen: Home
      },
  },
  {initialRouteName:'Main'},
  DrawerConfig
);

export default createAppContainer(DrawerNavigator);

App.js：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React from "react";
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar
} from "react-native";
// import { Provider } from 'react-redux';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions
} from "react-native/Libraries/NewAppScreen";


import Main from './src/Containers/Main.js'
import Login from './src/Containers/Login.js'
import Signup from './src/Containers/Signup.js'
import Home from './src/Containers/Home.js'
import CardDetails from './src/Containers/CardDetails'
import AddMobile from './src/Containers/AddMobile'
import Profile from './src/Containers/Profile'
import MyProduct from './src/Containers/MyProduct'
import Root from './src/Containers/Root'
import DrawerNavigator from './src/Navigation/DrawerNavigator';
import Navigators from './src/Navigation/Navigators';
import MenuButton from "./src/Components/MenuButton.js";

const App: () => React$Node = () => {
  return (
      // <DrawerNavigator /> /// here the drawer works fine but stack navgation not working
      <Root /> ////here stacknavigations work fine but I got an error when I press drawer icon. Error screenshot pasted in the end.
  );
};

const styles = StyleSheet.create({

});

export default App;

【问题讨论】：

创建多个容器不是这里的问题，您可以创建多个容器。您能否描述一下您期望从导航中获得的流程。
我有 splashScreen ，它有 3 个按钮（登录、注册、访客），每个按钮都重定向到表单，但访客重定向到主屏幕，其中有汉堡图标来打开抽屉，所以我解释了每个导航以单独的方式工作正常，我想让两者都工作。
我没有时间模仿你的流程，但你应该检查这个link，不完全按照你的流程，但通过查看代码，可能会帮助你完成你想要做的事情达到。

标签： javascript react-native navigation react-native-navigation react-native-drawer

【解决方案1】：

你可以这样试试。

const DrawerNavigators = createDrawerNavigator({
  //Drawer Optons and indexing
  Main: {
    screen: HomeActivity_StackNavigator,
    navigationOptions: {
      drawerLabel: 'Dashboard',
    }
  }
});

const NonDrawerNavigators = createStackNavigator({
    TaskView: {
        screen: TaskView,
        navigationOptions: {
            title: 'Task',
            headerStyle: {
            backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    },
    TeamView: {
        screen: TeamView,
        navigationOptions: {
            title: 'Team',
            headerStyle: {
                backgroundColor: '#FF9800',
            },
            headerTintColor: '#fff'
        }
    }
}, {headerLayoutPreset: 'center'});

const AppNavigator = createStackNavigator({
    drawerStack: {
        screen: DrawerNavigators,
        navigationOptions: {
            header: null
        }
    },
    nonDrawerStack: {
        screen: NonDrawerNavigators,
        navigationOptions: {
            header: null
        }
    }
});

export default createAppContainer(createSwitchNavigator({
    SplashScreen: SplashScreen,
    loginStack: LoginNavigator,
    homeStack: AppNavigator
    }, {
       initialRouteName: 'SplashScreen'
   })
);

【讨论】：