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

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

转载作者：行者123 更新时间：2023-12-03 12:46:52

26

4

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

最佳答案

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

实际上，它看起来像这样:

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

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

关于react-native - 如何同时实现DrawerNavigator和StackNavigator，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50290050/

26

4

0

文章推荐： javascript - 如何随机化(洗牌)JavaScript 数组？

文章推荐： sql - 像 Sphinx 这样的全文搜索服务器如何工作？

javascript - 如何在 native react 中将 stackNavigation 与抽屉导航一起使用并在 stackNavigation 组件中使用toggleDrawer()
我在我的项目中使用 react 导航。我想在抽屉导航中使用堆栈导航。我想在堆栈导航屏幕中使用 this.navigation.toggleDrawer()，但不将其附加到堆栈导航屏幕中。 // dra
javascript - React Native 从 StackNavigator 导航到另一个 StackNavigator 或 TabNavigator
我是 React Native 和 React-Navigator 的新手，想实现这个设置: 我已经有 SignUpScreen，来自 SignUpScreen01 - SignUpScreen05，
reactjs - StackNavigation 内的模态模式屏幕
我试图让一个屏幕在常规 StackNavigation 对象中充当模态。意思是，我希望所有屏幕都充当卡片(从侧面渲染)，但一个屏幕充当模态(从底部渲染)，但它不起作用，所有屏幕都从侧面渲染。代码:
android - 防止用户返回到上一屏幕 StackNavigator
我想做一个简单的任务:成功登录后将用户重定向到他的主页。我使用react-navigation的StackNavigator来达到这个目的: // App.js class App extends C
javascript - StackNavigator - 跳过一页堆栈中的页面
在我的 React Native 应用程序中，我使用 React Navigation 库来实现导航。我在 StackNavigator 上构建了整个应用程序。现在我遇到了一个我不知道如何解决的问题。
ios - 在动画场景之外控制 StackNavigator
编辑:我了解我的问题和解决方案，所以我改写我的问题，然后给出答案。一个普通的 StackNavigator 和带有导航的屏幕看起来像这样: class ExampleScreen extends R
ios - StackNavigation 如何知道我从哪个屏幕导航？
我目前在我的 React native 应用程序中使用 StackNavigator。我有两个屏幕，它们都将导航到同一屏幕 LoginScreen。但是，根据我来自哪个屏幕，我想转到不同的屏幕。例
animation - 如何在 StackNavigator 中更改动画的方向？
如何在 StackNavigator 中更改动画的方向？当前行为当用户转到另一个屏幕时，屏幕从飞出从下到上 . 预期行为当用户转到另一个屏幕时，屏幕从飞出从右到左 . (比如 Faceboo
reactjs - 在 StackNavigator 中使用自定义选项卡？
我有用户列表，每个用户在列表中都有其显示图像。我正在尝试的是，每当用户按下显示图像时，都会通过 stackNavigation 重定向到他/她的个人资料。自定义TabView: const
javascript - 如何使用 StackNavigator 将数据从一个屏幕内的列表传递到下一个屏幕
我已经开始学习 react 原生，很棒的东西。我已经能够使用 StackNavigator 在屏幕之间导航。在一个屏幕上，我显示一个由静态 json 文件填充的列表。单击一行后，应该会弹出下一个屏幕
javascript - 使用 StackNavigator 导航到另一个页面时销毁当前页面并停止上一页上的所有正在运行的进程
我正在使用react-native，当我尝试使用StackNavigator导航到另一个页面时，上一个页面正在后台运行这是 App.js import Login from './app/compo
javascript - 使用功能组件时 Stacknavigator 未导航到新屏幕
这是我的App.js import React, {Component} from 'react'; import { createAppContainer } from 'react-navigat
javascript - 有没有办法让 StackNavigator 无法导航回页面？
我在使用 React-Native js 框架开发带有导航的应用程序时遇到了问题。我有一个 StackNavigator，它可以在登录页面和主页之间导航。但我不想让用户在按下电话按钮或通过屏幕栏上的按
javascript - React-Native StackNavigator
好的，大家好，我有一个问题，我是 react 原生开发的新手，并且遇到了 StackNavigator 的问题。当我按下用于导航当前屏幕的按钮时，它会出现如下错误: enter image descr
android - React Native StackNavigator 在重新进入时消失
我们在我们的 React Native 应用程序中遇到了一个非常奇怪的 react 导航场景，它只在 Android 上观察到(在模拟器和物理设备上 AND 用于调试构建和发布构建)，但它在 iOS
react-native - Tabs 单击两次时如何导航回 StackNavigator？
我有一个带有三个选项卡的 TabNavigator。这三个选项卡中的每一个都是 StackNavigators。如果用户单击同一个选项卡按钮两次，我如何才能将 StackNavigator 导航回来
react-native - 如何在 StackNavigator 中模糊时卸载屏幕？
我正在使用 React Navigation x5，我有 StackNavigator 正在加载一堆屏幕。我想在模糊上卸载一个特定的屏幕组件，以获得与使用 DrawerNavigator 时使用 un
react-native - 通过单击包含 StackNavigator 的标题打开抽屉
这是包含我的抽屉的组件 export default class StackInView extends React.Component { render() { const Stack
react-native - 如何禁用滑动到嵌套 StackNavigator 中的其他选项卡
我没有什么问题......我在 TabNavigator 中嵌套了 StackNavigator，例如: 表1 堆栈屏幕 Tab2 Tab3 Tab4 我想在选项卡 View 上保留滑动，但想在打开
react-native - 在 StackNavigator 中更改特定屏幕的动画方向？
我需要为 Navigation 5.0 中的堆栈导航器中的特定屏幕将导航动画更改为 bottom-to-top。最佳答案我在 StackOverflow 中寻找答案，但没有找到与单屏相关的解决方案

首页

博学

6Ren·AI

商城

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