带有React导航的react Native中的侧边栏菜单
我在React Native中使用react-navigation，我想创建一个侧边栏菜单，它作为一个从左到右的覆盖打开，并填充了大约80-90%的宽度。
在没有反应导航的情况下，使用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 }
});但是，由于DrawerNavigator嵌套在A中，因此AScreen的标头将位于顶部。
回答 1
Stack Overflow用户
发布于 2017-05-26 23:25:33
我需要你描述的相同功能，并设法让它与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}} />)
});如您所见，我已经创建了一个包含自定义抽屉内容的抽屉组件。这是该组件的基本设置：
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>
);
}
}我希望这能帮到你。我已经简化了一些代码，主要是显示相关的部分，所以如果你有任何后续问题，尽管问吧！
https://stackoverflow.com/questions/44117973
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号