我要进行如下图所示的设计。
https://imgur.com/a/ehRthSS“图片”
这是我直到现在尝试过的代码
const NotificationTab = createMaterialTopTabNavigator({
NotificationsActivity: NotificationsActivity,
NotificationsList: NotificationsList,
},
{
initialRouteName: 'NotificationsActivity',
tabBarOptions: {
style: {
backgroundColor: 'red'
}
},
tabBarPosition: 'top',
})
我有两个选项卡的两个屏幕。 这是我的抽屉导航器,它调用该堆栈
const memberdrawerNavigator = createDrawerNavigator(
{
Notifications : { screen: NotificationTab},
ResetPassword : { screen: ResetPassword},
},
{
gesturesEnabled: true,
contentComponent: props => <DrawerMember {...props} />
},
{
contentOptions: {
}
}
);
这是应用程序的主要导航器的主要容器
const AppNavigator = createAppContainer(RootStack)
export default AppNavigator;
请帮助我如何进行图片中给出的设计?只要给我设计的蓝图,我会做到的。 预先感谢
答案 0 :(得分:0)
您可以通过向其中添加一些MaterialTopTabNavigator
来制作props
,如下所示。
const NotificationTab = createMaterialTopTabNavigator({
NotificationsActivity: NotificationsActivity,
NotificationsList: NotificationsList,
},
{
initialRouteName: 'NotificationsActivity',
tabBarOptions: {
//use this for change the color of active tab's label.
activeTintColor: "red",
//use this for change the color of inactive tabs' label.
inactiveTintColor: "black",
//use this for change the label styles.
labelStyle: {
fontSize: 30,
},
//use this for change the color of inactive tab.
inactiveBackgroundColor: "white",
//use this for change the style of vanigation bar.
style: {
backgroundColor: 'white',
},
//use this for change the style of indicator.
indicatorStyle: {
backgroundColor: 'white'
}
},
tabBarPosition: 'top',
})
有关更多信息,https://reactnavigation.org/docs/en/material-top-tab-navigator.html