Reactjs 反应本机：标题需要位于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);

const EmptyLegsNavigator=createStackNavigator(
{
主屏幕：{
屏幕：主清空屏幕，
},
第二屏幕：{
屏幕：第二屏幕，
},
},
{
默认导航选项：{
标题:"空腿",，
头型：{
背景颜色：“#eee”，
},
},
},
);
const QuotesNavigator=createStackNavigator(
{
主报价屏幕：{
屏幕：MainQuoteScreen，
},
},
{
默认导航选项：{
标题:"引用",，
头型：{
背景颜色：“#eee”，
},
},
},
);
const FlightsNavigator=createStackNavigator(
{
主飞行屏幕：{
屏幕：MainFlightScreen，
},
},
{
默认导航选项：{
标题:"航班",，
头型：{
背景颜色：“#eee”，
},
},
},
);
const RegisterNavigator=createStackNavigator(
{
注册表：注册表屏幕，
},
{
默认导航选项：{
标题：'登记'，
头型：{
背景颜色：“#eee”，
},
},
},
);
const LoginNavigator=createStackNavigator(
{
登录：LoginScreen，
},
{
默认导航选项：{
标题：“登录”，
头型：{
背景颜色：“#eee”，
},
},
},
);
常量选项卡屏幕配置={
空瓶：{
屏幕：清空导航器，
导航选项：{
标题:"空腿",，
tabBarIcon:tabInfo=>{
返回；
},
tabBarColor:“#eee”，
},
},
引述：{
屏幕：QuotesNavigator，
导航选项：{
标题:"引用",，
tabBarIcon:tabInfo=>{
返回；
},
tabBarColor:“#ddd”，
},
},
航班：{
屏幕：FlightsNavigator，
导航选项：{
标题:"航班",，
tabBarIcon:tabInfo=>{
返回；
},
tabBarColor:“#ccc”，
},
},
};
常量MainTabNavigator=
createMaterialTopTabNavigator（选项卡屏幕配置{
选项卡选项：{}，
});
const main navigator=createDrawerNavigator(
{
Main:MainTabNavigator，
注册人：注册人，
登录名：LoginNavigator，
},
{
内容选项：{
activeTintColor:'红色'，
},
},
);
导出默认createAppContainer（MainNavigator）；

---

谢谢你的帮助

您必须在根组件的顶部添加填充。 您当然有一个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>
    )
  }
}

。。。
从“YourMainNavigator文件”导入MainNavigator
类应用程序扩展了React.Component{
...
render（）{
返回(
{/*根据屏幕大小或常数，您可以使用另一个paddingTop值。如果使用Expo*/}，则可以使用statusBarHeight
)
}
}

您可以使用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;

import React，{Component}来自'React'；
进口{
安全区域视图，视图，
}从“反应本机”；
从“/YourMainNavigator文件路径”导入MainNavigator
类应用程序扩展组件{
...
render（）{
返回(
或
);
}
}
导出默认应用程序；

你好！谢谢你的帮助。这就解决了缺口的问题，并且正确地显示了条，但是标签仍然在标题的顶部，这就是我需要解决的问题。标题必须位于选项卡的顶部！你能分享一下你是如何添加标签和标题的吗？所以我可以帮你更多的忙。嘿！我已经在上面的代码中添加了如何添加选项卡和标题。首先，我在侧面添加了主抽屉的选项。然后，在MainTabNavigator中，我添加了顶部选项卡导航器和我需要的选项卡，每个选项卡都有一个堆栈，我将在将来添加新屏幕。您好！谢谢你的帮助。这就解决了缺口的问题，并且正确地显示了条，但是标签仍然在标题的顶部，这就是我需要解决的问题。标题必须位于选项卡的顶部！