React Native: заголовок должен быть поверх createMaterialTopTabNavigator

У меня проблемы с createMaterialTopTabNavigator (реакция-навигация). Я хочу, чтобы мой навигатор вкладок располагался под заголовком, но в настоящее время он отображается следующим образом:

Ошибка заголовка

У меня нет особых знаний о том, как я могу опустить заголовок, так как мне нужно, чтобы заголовок был над навигатором вкладок. Вот основной код для этой части:

const EmptyLegsNavigator = createStackNavigator(
  {
    MainEmptyLegsScreen: {
      screen: MainEmptyLegScreen,
    },
    SecondaryScreen: {
      screen: SecondaryScreen,
    },
  },
  {
    defaultNavigationOptions: {
      title: 'Empty Legs',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const QuotesNavigator = createStackNavigator(
  {
    MainQuotesScreen: {
      screen: MainQuoteScreen,
    },
  },
  {
    defaultNavigationOptions: {
      title: 'Quotes',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const FlightsNavigator = createStackNavigator(
  {
    MainFlightsScreen: {
      screen: MainFlightScreen,
    },
  },
  {
    defaultNavigationOptions: {
      title: 'Flights',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const RegisterNavigator = createStackNavigator(
  {
    Register: RegisterScreen,
  },
  {
    defaultNavigationOptions: {
      title: 'Register',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const LoginNavigator = createStackNavigator(
  {
    Login: LoginScreen,
  },
  {
    defaultNavigationOptions: {
      title: 'Login',
      headerStyle: {
        backgroundColor: '#eee',
      },
    },
  },
);

const tabScreenConfig = {
  EmptyLegs: {
    screen: EmptyLegsNavigator,
    navigationOptions: {
      title: 'Empty Legs',
      tabBarIcon: tabInfo => {
        return <Icon name="airport" size={25} color="black" />;
      },
      tabBarColor: '#eee',
    },
  },
  Quotes: {
    screen: QuotesNavigator,
    navigationOptions: {
      title: 'Quotes',
      tabBarIcon: tabInfo => {
        return <Icon name="airplane" size={25} color="black" />;
      },
      tabBarColor: '#ddd',
    },
  },
  Flights: {
    screen: FlightsNavigator,
    navigationOptions: {
      title: 'Flights',
      tabBarIcon: tabInfo => {
        return <Icon name="airplane-takeoff" size={25} color="black" />;
      },
      tabBarColor: '#ccc',
    },
  },
};

const MainTabNavigator =
  createMaterialTopTabNavigator(tabScreenConfig, {
    tabBarOptions: {},
  });

const MainNavigator = createDrawerNavigator(
  {
    Main: MainTabNavigator,
    Register: RegisterNavigator,
    Login: LoginNavigator,
  },
  {
    contentOptions: {
      activeTintColor: 'red',
    },
  },
);

export default createAppContainer(MainNavigator);

Спасибо за помощь!


react-native reactjs react-navigation header tabnavigator
person Leminur    schedule 16.12.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы должны добавить отступ поверх корневого компонента. У вас наверняка есть файл App.js, в который вы импортируете свой MainNavigator.

...
import MainNavigator from 'yourMainNavigatorfile'

class App extends React.Component {
  ...
  render(){
    return (
      <View style={paddingTop:20}> {/* You can use another paddingTop value depending of your screen size or Constants.statusBarHeight if you use Expo*/}
        <MainNavigator/>
      </View>
    )
  }
}
person Ranotronarison Nomena Arivony    schedule 16.12.2019
comment
Привет! Спасибо за помощь. Это решает проблему с выемкой и отображает панель правильно, но вкладки по-прежнему находятся в верхней части заголовка, и это проблема, которую мне нужно решить. Заголовок должен быть поверх вкладок! - person Leminur; 16.12.2019

arrow_upward
0
arrow_downward

Вы можете использовать SafeAreaView вместо paddingTop.

import React, { Component } from 'react';
import {
  SafeAreaView, View,
} from 'react-native';
import MainNavigator from './yourMainNavigatorfilePath'

class App extends Component {
  ...
  render() {
    return (
        <SafeAreaView>
            <MainNavigator />
        </SafeAreaView>

        OR

        <View>
            <SafeAreaView>
                <MainNavigator />
            </SafeAreaView>
        </View>
    );
  }
}
export default App;
person Sharad S Katre    schedule 16.12.2019
comment
Привет! Спасибо за помощь. Это решает проблему с выемкой и отображает панель правильно, но вкладки по-прежнему находятся в верхней части заголовка, и это проблема, которую мне нужно решить. Заголовок должен быть поверх вкладок! - person Leminur; 16.12.2019
comment
Не могли бы вы рассказать, как вы добавляете вкладки и заголовки? Так что я смогу помочь вам в этом подробнее. - person Sharad S Katre; 20.12.2019
comment
Привет! Я добавил, как добавляю вкладки и заголовки в приведенный выше код. Во-первых, я добавил опции для основного ящика сбоку. Затем в MainTabNavigator я добавил верхний навигатор вкладок с нужными вкладками, и каждая отдельная вкладка имеет стек, в который я буду добавлять новые экраны в будущем. - person Leminur; 21.12.2019
comment
snack.expo.io/@react-navigation/move-tabs- под заголовком - person Sharad S Katre; 23.12.2019