我遇到与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);
感谢您的帮助!
您必须在根组件的顶部添加填充。您当然有一个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>
)
}
}
您可以使用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;