我在 React Native
中使用 react-navigation
并且我想创建一个侧边栏菜单,它作为一个覆盖层打开,从左到右并填充周围宽度的 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 }
});
但是由于 DrawerNavigator 嵌套在 A
中,因此 AScreen
的标题将位于顶部。
最佳答案
我需要您描述的相同功能,并设法让它与 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>
);
}
}
希望对您有所帮助。我简化了一些代码以主要显示相关位,因此如果您有任何后续问题,请尽管提问!
关于javascript - 带有反应导航的 React Native 中的侧边栏菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44117973/