react-native - 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

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

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

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