如何删除顶部标签栏下不需要的空格？

Question

我正在使用 react-native 和 react-navigation 构建移动应用程序。但是top tab下面有个不需要的区域，想请教一下怎么删除

这是关于我的应用程序的信息。

■ Library version
react-native: 0.60.08
react-navigation: 4.0.0

■ App screen structure
This app has one top tab navigator and one bottom tab navigator.

- The screens on the top tab
1. EventIndexScreen
2. EventAppliedScreen
3. EventCreatedScreen

- The screens on the bottom tab
1. Top tab navigator(EventIndexScreen, EventAppliedScreen, and EventCreatedScreen)
2. NotificationScreen
3. UserScreen

这是我的应用程序的屏幕截图，我想删除红色方块内的区域。

https://gyazo.com/2816a387be1ba749d48b48df6b445117

这些是我的代码。

顶部标签的代码

import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

import EventScreen from '../components/screens/event';
import EventAppliedScreen from '../components/screens/event/EventAppliedScreen';
import EventCreatedScreen from '../components/screens/event/EventCreatedScreen';

const createTabStack = (title, screen) => createStackNavigator({
  [title]: { screen },
});

const topTabNavigator = createMaterialTopTabNavigator(
  {
    EventIndexTab: { screen: createTabStack('EventTab', EventScreen) },
    EventAppliedTab: { screen: createTabStack('EventAppliedTab', EventAppliedScreen) },
    EventCreatedTab: { screen: createTabStack('EventCreatedTab', EventCreatedScreen) },
  },
  {
    tabBarOptions: {
      activeTintColor: '#333',
      inactiveTintColor: '#bbb',
    },
    animationEnabled: false,
    swipeEnabled: false,
  },
);

export default topTabNavigator;

底部标签的代码

import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createStackNavigator } from 'react-navigation-stack';

import topTabNavigator from './TopTabNavigator';
import NotificationScreen from '../components/screens/NotificationScreen';
import UserScreen from '../components/screens/UserScreen';

const createTabStack = (title, screen) => createStackNavigator({
  [title]: { screen },
});

const bottomTabNavigator = createBottomTabNavigator(
  {
    EventTab: { screen: createTabStack('EventTab', topTabNavigator) },
    NotificationTab: { screen: createTabStack('NotificationTab', NotificationScreen) },
    UserTab: { screen: createTabStack('UserTab', UserScreen) },
  },
  {
    tabBarOptions: {
      activeTintColor: '#333',
      inactiveTintColor: '#bbb',
    },
    animationEnabled: false,
    swipeEnabled: false,
  },
);

export default bottomTabNavigator;

Answer 1

每个 StackNavigator 都有 "Navigation Header" 。 space 是因为导航 header

请更改此代码

{
    EventIndexTab: { screen: createTabStack('EventTab', EventScreen) },
    EventAppliedTab: { screen: createTabStack('EventAppliedTab', EventAppliedScreen) },
    EventCreatedTab: { screen: createTabStack('EventCreatedTab', EventCreatedScreen) },
  },

至

{
    EventIndexTab: { screen: EventScreen },
    EventAppliedTab: { screen: EventAppliedScreen },
    EventCreatedTab: { screen: EventCreatedScreen },
  },

如何删除顶部标签栏下不需要的空格？

How to delete unnecessary spaces under the top tab bar?

react-native

react-navigation

react-navigation-stack