React Native：标头必须位于createMaterialTopTabNavigator的顶部

Question

我遇到一些与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);

感谢您的帮助！

Answer 1

您可以使用 Fragments 并且可以返回两者（客户标题和顶部标签栏）。

import React, {Fragment} from 'react';
const TopTabNavigator = () => {
return (
  <Fragment>
  <YourCustomHeaderBar />
   <TopTab.Navigator>
    <TopTab.Screen name="Empty Legs" component={Screen1} />
    <TopTab.Screen name="Quotes" component={Screen2} />
    <TopTab.Screen name="Flights" component={Screen3} />
   </TopTab.Navigator>
  </Fragment>
 );
};

Answer 2

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

Answer 3

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