使用react-navigation实现React Native的侧边栏菜单

Question

使用react-navigation实现React Native的侧边栏菜单

javascriptnode.jsreactjsreact-nativereact-navigation

7

我正在使用React Native中的react-navigation，我想创建一个侧边栏菜单，它作为叠加层从左到右打开，并填充大约80-90％的宽度。

在没有react-navigation的情况下，可以使用react-native-side-bar等软件包实现此目的，但我想知道是否可以使用DrawerNavigator完全相同的功能。

但是DrawerNavigator似乎有菜单按钮。无法自己配置叠加层吗？

编辑

解决方案1

一种方法是使用

const MyStackNavigator = StackNavigator({
  A: { screen: AScreen },
  B: { screen: BScreen },
  C: { screen: CScreen }
});

const RootNavigator = DrawerNavigator({
  A: { screen: MyStackNavigator },
}, {
  // set content of side bar
  contentComponent: (props) => <Sidebar />
});

但这样会使得抽屉从所有屏幕AScreen、BScreen和CScreen中出现，而我只希望它在AScreen中出现，因为StackNavigator嵌套在DrawerNavigator中。

解决方案2

另一个解决方案是使用

const MyDrawerNavigator = DrawerNavigator({
  A: { screen: AScreen },
}, {
  // set content of side bar
  contentComponent: (props) => <Sidebar />
});

const RootNavigator = StackNavigator({
  A: { screen: MyDrawerNavigator },
  B: { screen: BScreen },
  C: { screen: CScreen }
});

但是由于抽屉式导航嵌套在 A 中，因此 AScreen 的标题将位于顶部。

- Jamgreen

你尝试做的事情与 DrawerNavigator 的默认行为有何不同？看一下 react-native-side-bar 的示例，他们正在做同样的事情。 - Spencer Carli

它是完全相同的。问题在于如何组织导航器。我已经更新了我的问题，并提供了一个示例。 - Jamgreen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rawa · Accepted Answer

我需要与您所描述的相同的功能，并设法使用React Navigation使其正常工作。基本上，我需要一个完全自定义的抽屉式导航菜单（侧边菜单）。

这是我的导航设置：

const MainNavigator = DrawerNavigator({
  Home: {
    screen: StackNavigator({
      Search: {
        screen: SearchScreen
      },
      Result: {
        screen: ResultScreen
      }
    })
  },
  Saved: {
    screen: StackNavigator({
      SavedStack: {
        screen: SavedWordsScreen
      }
    })
  },
  About: {
    screen: StackNavigator({
      AboutStack: {
        screen: AboutScreen
      }
    })
  }
},{
  contentComponent: props => (<Drawer navigation={props.navigation} drawerProps={{...props}} />)
});

正如您所看到的，我已经创建了一个抽屉组件，其中包含我的自定义抽屉内容。这是该组件的基本设置：

import React, { Component } from 'react';
import { ScrollView, View, Text } from 'react-native';
import { Button } from 'react-native-elements';

class Drawer extends Component {
  render() {
    return (
        <View>
            <Button title="Search" onPress={() => this.props.navigation.navigate('Home')} />
            <Button title="Saved" onPress={() => this.props.navigation.navigate('Saved')} />
            <Button title="About" onPress={() => this.props.navigation.navigate('About')} />
        </View>
    );
  }
}

希望这能帮到你。我已经简化了一些代码，只展示了相关部分，如果你有任何后续问题，请随时提问！