如何在React Navigation中的堆栈导航内添加抽屉

Question

我正在进行一个诸如登录/注册应用程序之类的实践项目，并且正在从反应导航中使用堆栈导航，并且它运行良好，

现在，当用户登录时，他应该被重定向到仪表板屏幕，我想要在标题右侧添加一个抽屉 “我还添加了屏幕截图”，我也在堆栈导航中创建了仪表板屏幕，我不知道如何添加堆栈导航中的那个抽屉，我只想在我的仪表板屏幕上放置一个抽屉，以便有人可以提供帮助？谢谢

App.js（在其中添加了所有堆栈屏幕的位置）

    import React from 'react';

    import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

    import HomeScreen from './screens/HomeScreen';
    import LoginScreen from './screens/LoginScreen';
    import RegisterScreen from './screens/RegisterScreen';
    import Dashboard from './screens/Dashboard';

    const StackNavigation = createStackNavigator({
      HomeStack: HomeScreen,
      LoginStack: LoginScreen,
      RegisterStack: RegisterScreen,
      DashboardStack: Dashboard,

    }, {
        initialRouteName: 'HomeStack',
      });

      const DrawerNav = createDrawerNavigator({
        DashboardStack: Dashboard,
      })


    export default class App extends React.Component {
      render() {
        return (
          <StackNavigation />
        );
      }
    }

Dashboard.js

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

    import Icon from 'react-native-vector-icons/FontAwesome';

    export default class Dashboard extends React.Component {

        static navigationOptions = {

            headerTitle: 'Dashboard',
            headerLeft: null,

            headerTitleStyle: {
                flex: 1,
                color: '#fff',
                textAlign: 'center',
                alignSelf: 'center',
                fontWeight: 'normal',
            },

            headerStyle: {
                backgroundColor: '#b5259e',
            },
        }

Answer 1

从右侧显示抽屉。

drawer Position创建Drawer Navigator时添加一个参数。

const DrawerNav = createDrawerNavigator({
  DashboardStack: Dashboard, 
},
{
  drawerPosition: 'right'
});

从标题的按钮调用DrawerNavigation。

添加一个按钮，标头toggleDrawer在Dashboard.js。您可以在中获得以下导航实例navigationOptions：

const DrawerNav = createDrawerNavigator({
  DashboardStack: Dashboard, 
},
{
  drawerPosition: 'right'
});

您可以将按钮更改为“可触摸不透明度”或其他按钮。

包装AuthStackNavigation并DrawerNavigation使用另一个导航器。

使用createSwitchNavigation或其他包装导航，然后导出。

class Dashboard extends React.Component {
  static navigationOptions = ({navigation, navigationOptions}) => {
    return {
      headerTitle: 'Dashboard@@',
      headerLeft: <Text>Left</Text>,
      headerRight: (
        <Button onPress = {navigation.toggleDrawer}
        title="Menu"
        color="#fff">
          <Text>Menu</Text>
        </Button>
      ),
      headerTitleStyle: {
        flex: 1,
        color: '#fff',
        textAlign: 'center',
        alignSelf: 'center',
        fontWeight: 'normal',
      },

      headerStyle: {
        backgroundColor: '#b5259e',
      },
    }
  }

Answer 2

react-navigation 对于那些在5.X中寻找解决方案的人，您可以这样做：

抽屉导航器

const ProductListWithDrawer = () => {
 return (
  <Drawer.Navigator initialRouteName="ProductList">
   <Drawer.Screen name="ProductList" component={screens.ProductList} />
   <Drawer.Screen name="ProductDetail" component={screens.ProductDetailScreen} />
  </Drawer.Navigator>
  );
 };

堆栈导航器（应包装在导航容器内）

<Stack.Navigator initialRouteName="Dashboard" screenOptions={{ headerShown: false }}>
  <Stack.Screen name="Dashboard" component={screens.Dashboard} />
  <Stack.Screen name="Loading" component={screens.Loading} />
  <Stack.Screen name="Chat" component={screens.Chat} />
  <Stack.Screen name="ProductListWithDrawer" component={ProductListWithDrawer} /> //our drawer
</Stack.Navigator>

基本上，这应该可以完成工作。这里可能出现的另一件事是使用参数导航到抽屉导航器内的那些屏幕时。在这种情况下，可以这样做：

navigation.navigate("ProductListWithDrawer", {
              screen: "ProductList",
              params: { user: "Alex"},
            });

这也在嵌套导航器中得到了解释。