React Native中的侧边栏菜单,带有react-navigation [英] Sidebar menu in React Native with react-navigation
问题描述
我在 React Native
中使用 react-navigation
,我想创建一个侧边栏菜单,该菜单以覆盖从左到右,填充宽度的80-90%左右。
I am using react-navigation
in React Native
and I want to create a sidebar menu which opens as an overlay that comes from left to the right and fills up around 80-90% of the width.
如果没有反应导航,这可以通过<$ c等软件包实现$ c> react-native-side-bar ,但我想知道我是否可以使用DrawerNavigator获得完全相同的功能。
Without react-navigation, this is possible with packages such as react-native-side-bar
, but I am wondering if I can get the exact same feature with DrawerNavigator.
但它看来DrawerNavigator有菜单按钮。是不是可以自己配置叠加?
But it seems DrawerNavigator has menu buttons. Isn't it possible to configure the overlay myself?
一种方法是使用
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中。
but then it will possible to drag in the drawer from all screens AScreen
, BScreen
, and CScreen
, while I only want it to be there for AScreen
, since the StackNavigator is nested in the DrawerNavigator.
另一个解决方案是使用
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
中。
but then the header of AScreen
will be on top since the DrawerNavigator is nested in A
.
推荐答案
我需要您正在描述和管理的相同功能,以使其与React导航一起使用。基本上,我需要一个完全自定义的抽屉(侧面菜单)。
I needed the same functionality that you're describing and managed to get it working with React navigation. Basically, I needed a fully custom drawer (side-menu).
这是我的导航器设置:
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}} />)
});
如您所见,我创建了一个抽屉组件,其中包含我的自定义抽屉内容。这是该组件的基本设置:
As you see, I've created a Drawer component which contains my custom drawer content. This is the basic setup of that component:
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>
);
}
}
我希望这会有所帮助。我已经简化了一些代码来主要显示相关位,所以如果你有任何后续问题,请问!
I hope this helps. I've simplified some of the code to mainly show the relevant bits so if you have any follow-up questions, just ask!
这篇关于React Native中的侧边栏菜单,带有react-navigation的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!