React Native 中的侧边栏菜单，带有 react-navigation

IT技术 javascript node.js reactjs react-native react-navigation

2021-05-07 12:55:01

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

如果没有 react-navigation，这对于诸如之类的包是可能的react-native-side-bar，但我想知道是否可以使用 DrawerNavigator 获得完全相同的功能。

但似乎 DrawerNavigator 有菜单按钮。是不是可以自己配置覆盖？

编辑

方案一

一种方法是使用

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

但是AScreen由于 DrawerNavigator 嵌套在A.

1个回答

我需要您描述的相同功能，并设法让它与 React 导航一起使用。基本上，我需要一个完全定制的抽屉（侧面菜单）。

这是我的导航器设置：

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

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

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

我希望这有帮助。我已经简化了一些代码以主要显示相关位，因此如果您有任何后续问题，请提问！

其它你可能感兴趣的问题

上一篇如何在 react-select 组件上添加图标和工具提示？下一篇react中的 props.children 不能是无状态组件？