时间戳

首页 > 解决方案 > 如何同时实现 DrawerNavigator 和 StackNavigator

react-native - 如何同时实现 DrawerNavigator 和 StackNavigator

问题描述

我正在使用 react-native-navigation 开发一个应用程序，我想在项目中有一个 StackNavigator 和一个 DrawerNavigator。所以，我已经在 app.js 中实现了它们，但是应用程序崩溃了，给出了这个错误“开发服务器返回了带有代码的响应错误：500”。我已经单独实现了它们并且它可以工作，但我不能一起实现它们。任何建议?

这是我的 app.js 代码

import React, {
    Component
} from 'react';

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

import {
    createStackNavigator,
    DrawerNavigator,
    DrawerItems
} from "react-navigation";

import {
    Container,
    Header,
    Content,
    Thumbnail,
    Button,
    Body
} from 'native-base';

import Profile from './components/Profile.js';
import Main from './components/Main.js';
import Login from './components/Login.js';
import Product from './components/Product.js';

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

const styles = StyleSheet.create({
    // styles here
});

export const Drawer = DrawerNavigator({
    Main: {
        screen: Main
    },
    Profile: {
        screen: Profile
    },
}, {
initialRouteName: 'Main',
contentComponent: CustomDrawer,
drawerPosition: 'Left',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
});

export const CustomDrawer = (props) => ( 
    <Container>
        <Header style = {
            styles.headerStyle
        }>
            <Body style = {
                styles.bodyStyle
            }>
                <Thumbnail style = {
                    {
                        height: 100,
                        width: 100
                    }
                }
                source = {
                    require('../image/logo.png')
                }/> 
            </Body> 
        </Header>
        <Content>
            <DrawerItems { ...props}  /> 
        </Content > 
    </Container>
)

export const Navapp = createStackNavigator({
    Login: {
        screen: Login
    },
    Drawer: {
        screen: Drawer
    },
    Product: {
        screen: Product
    },
});

标签： react-nativereact-navigation

解决方案

我的应用程序有一个非常相似的设置，这就是我处理它的方式。首先，我创建了一个堆栈导航器，其中包含我希望登录用户看到的路线，然后将该导航器放在抽屉导航器中（如果需要，您可以在其中放置多个）。最后我创建了我的顶级导航器，它的初始路由指向登录页面；登录后，我将用户导航到第二条路线，该路线指向我的抽屉导航器。

在实践中，它看起来像这样：

// Main Screens for Drawer Navigator
export const MainStack = StackNavigator({
  Dashboard: {
    screen: Dashboard,
    navigationOptions: {
      title: 'Dashboard',
      gesturesEnabled: false,
      headerLeft: null
    }
  },

  Notifications: {
    screen: Notifications,
    navigationOptions: {
      title: 'Notifications'
    }
  }
}, { headerMode: 'screen' } );

// Drawer Navigator
export const Drawer = DrawerNavigator({
  MainStack: {
    screen: MainStack
  }
});


// Main App Navigation
export const AppStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      header: null,
      gesturesEnabled: false
    }
  },

  Drawer: {
    screen: Drawer,
    navigationOptions: {
      header: null,
      gesturesEnabled: false
    }
  }
}, { headerMode: 'none' } );

// In Your App.js
<AppStack />

Note that in the last stack navigator, the drawer screen has header set to null; this is because with nested stack navigators you can sometimes run into an issue where you'll have duplicate headers. This will hide the top-level navigator's header and let you show / customize the headers for your nested navigators.

推荐阅读