如何在 React Navigation 中的 Stack Navigation 中添加抽屉

Question

我正在做一个像登录/注册应用程序这样的练习项目，我正在使用 react-navigations 中的 Stack Navigation，它运行良好，

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

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 />
        );
      }
    }

仪表板.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',
            },
        }

原文由 Irshad Alam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从右侧显示抽屉。

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

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

从标题的按钮调用 DrawerNavigation。

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

 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',
      },
    }
  }

您可以将按钮更改为 Touchable Opacity 或其他按钮。

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

使用 createSwitchNavigation 或其他方法包装您的导航并导出。

 // App.js

import React from 'react';

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

import HomeScreen from './srcs/screens/Home';
import Dashboard from './srcs/screens/Dashboard';

const AuthStackNavigation = createStackNavigator({
  HomeStack: HomeScreen,
  LoginStack: HomeScreen,
  RegisterStack: HomeScreen,
}, {
  initialRouteName: 'HomeStack',
})

const DashboardStack = createStackNavigator({ // For header options
  Dashboard: Dashboard
})

const DrawerNav = createDrawerNavigator({
  DashboardStack: DashboardStack,
  SecondScreen: Dashboard, // You should use another screen.
  ThirdScreen: Dashboard,
})

const MainNavigation = createSwitchNavigator({
  HomeDrawer: DrawerNav,
  AuthStack: AuthStackNavigation, // You will use this.props.navigation.replace('HomeDrawer') after login process.
})

export default MainNavigation // Stack, Drawer, Switch naviagtions return react component.

原文由 Jeff Gu Kang 发布，翻译遵循 CC BY-SA 4.0 许可协议