React Native:标头必须位于createMaterialTopTabNavigator的顶部 [英] React Native: Header needs to be on top of createMaterialTopTabNavigator
本文介绍了React Native:标头必须位于createMaterialTopTabNavigator的顶部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我遇到一些与createMaterialTopTabNavigator(反应导航)有关的麻烦.我想让我的标签导航器位于标题下方,但这是当前显示的方式:
I am having some trouble related to createMaterialTopTabNavigator (react-navigation). I want to have my tabs navigator below the header, yet this is how it's currently shown:
我不太了解如何降低标题,因为我需要标题位于选项卡导航器上方.这是该部分的主要代码:
I don't have much knowledge about how I could bring the header down, as I need the header to be above the tabs navigator. Here is the main code for that part:
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);
感谢您的帮助!
推荐答案
您可以使用SafeAreaView代替paddingTop.
You can use SafeAreaView instead of 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;
这篇关于React Native:标头必须位于createMaterialTopTabNavigator的顶部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文