如何同时实现DrawerNavigator和StackNavigator

Question

如何同时实现DrawerNavigator和StackNavigator

Ami*_*mir 5 react-native react-navigation

我正在使用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
    },
});

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 7

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

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

// 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 />

Run Code Online (Sandbox Code Playgroud)

请注意，在最后一个堆栈导航器中，抽屉屏幕的标题设置为空；这是因为使用嵌套的堆栈导航器有时会遇到标题重复的问题。这将隐藏顶级导航器的标题，并让您显示/自定义嵌套导航器的标题。

归档时间：	7 年，6 月前
查看次数：	7215 次
最近记录：	6 年前