Question

我正在使用react-native和react-navigation构建移动应用。但是，顶部标签下没有多余的区域，所以我想问一下如何删除它。

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

■ 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 都有“导航标题” 。空格是因为导航标题

请更改此代码

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

收件人

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

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

1 个答案: