Question

我要进行如下图所示的设计。

这是我直到现在尝试过的代码

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;

请帮助我如何进行图片中给出的设计？只要给我设计的蓝图，我会做到的。预先感谢

Answer 1

您可以通过向其中添加一些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

如何在React Native中使堆栈内部的标签

1 个答案: