如何使某些标签（屏幕）在材料顶部栏中可跳过？

Question

import React from "react";
import { Image } from "react-native";
import { createMaterialTopTabNavigator } from "react-navigation-tabs";
import { createAppContainer } from "react-navigation";
import Profile from "../components/Profile/Profile";
import Trips from "../components/Trips/MyTrips";
import Wallet from "../components/Wallet/Wallet";
import Booking from "../components/Booking/Booking";
import Summary from "../components/Summary/Summary";
import Colors from "../Shared/Colors";

bottomBarConfig = {
  Summary: {
    screen: Summary,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/home_active.png")
                : require("./../assets/images/home_notactive.png")
            }
            size={25}
            color={focused ? Colors.Primary : "#808080"}
          />
        );
      },

      title: "Home"
    }
  },
  Trips: {
    screen: Trips,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/mytrips_active.png")
                : require("./../assets/images/mytrips_notactive.png")
            }
            size={25}
            color={focused ? Colors.Primary : "#808080"}
          />
        );
      },

      style: {}
    }
  },
  Booking: {
    screen: () => null,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={require("./../assets/images/book.png")}
            size={55}
            style={{ height: 120 }}

            color={focused ? Colors.Primary : "#808080"}
          />
        );
      },
      showLabel: false,
      gesturesEnabled: false
    }
  },
  Wallet: {
    screen: Wallet,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/mywallet_active.png")
                : require("./../assets/images/mywallet_notactive.png")
            }
            size={25}
            color={focused ? Colors.Primary : "#808080"}
          />
        );
      }
    }
  },
  Profile: {
    screen: Profile,
    navigationOptions: {
      tabBarIcon: ({ focused }) => {
        return (
          <Image
            source={
              focused
                ? require("./../assets/images/more_active.png")
                : require("./../assets/images/more_notactive.png")
            }
            size={25}
            color={focused ? Colors.Primary : "#ff00ff"}
          />
        );
      }
    }
  }
};

const TabNavigator = createMaterialTopTabNavigator(bottomBarConfig, {
  tabBarPosition: "bottom",
  tabBarOptions: {
    showIcon: true,
    upperCaseLabel: false,
    activeTintColor: Colors.Primary,
    inactiveTintColor: "gray",
    pressColor: Colors.Primary,
    style: {
      backgroundColor: "white",
      border: "none"
    },
    labelStyle: {
      fontSize: 10,
      fontFamily: "Montserrat-Regular"
    },
    indicatorStyle: {
      backgroundColor: Colors.Primary
    }
  }
});
const App = createAppContainer(TabNavigator);

export default App;

这是我要执行的照片（不是我现在所拥有的照片），底部是带有大按钮的中间栏。

为此，我为其创建了屏幕，然后将删除标签并为图像设置样式。但是我希望用户从选项卡2滑动到选项卡3时，他实际上转到选项卡4而不是3的问题。我希望该按钮将用户带到另一条路线。

所以我希望选项卡3是可跳过的，没有任何屏幕，我希望它只是一个按钮。

我正在使用create createMaterialTopTabNavigator，因为它具有滑动功能，并且已经将其配置为位于底部，并且我将在中间编辑按钮的样式，只需使其可跳过即可。