React Native中的边栏菜单与react-navigation

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

没有反应导航，这是可能的包如react-native-side-bar ，但我想知道是否可以得到与DrawerNavigator完全相同的function。

但似乎DrawerNavigator有菜单button。 是不是可以自己configuration覆盖？

编辑

解决scheme1

一种方法是使用

 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抽屉，而我只希望它可以在AScreen ，因为StackNavigator嵌套在DrawerNavigator中。

解决scheme2

另一个解决scheme是使用

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

但是由于DrawerNavigator嵌套在A所以AScreen的头部将会在顶部。

Answer 1

我需要与您描述的function相同的function，并设法使其与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}} />) }); 

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

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

我希望这有帮助。 我已经简化了一些代码来主要显示相关的代码，所以如果你有任何后续问题，请问！