Переключите Навигатор Два заголовка

Question

Я создал приложение с BottomTabNavigator и createSwitchNavigator.

Если я объявлю свой экран внутри MainTabNavigator, верхний заголовок моих экранов будет работать как положено, но как только я импортирую свои экраны (например, мой HomeScreen), я получу двойной заголовок.

Я пытался добавить:

{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
}

На мой StackNavigator, но, похоже, не дает эффекта.

Я пытался смотреть на похожие вопросы, но не был направлен в правильном направлении.

Кто-нибудь еще знаком с этой проблемой и как ее решить?

Приложение JS

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator,createBottomTabNavigator } from 'react-navigation';
import AppNavigator from './navigation/AppNavigator';

export default class App extends React.Component {
    render() {
        return <AppNavigator />;
    }
}

Навигатор приложений

import React from 'react';
import { createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';

export default createSwitchNavigator(
  {
    Main: MainTabNavigator,
  },
);

MainTabNavigator

import React from 'react';
import { Button, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import HomeScreen from '../screens/clubs/Home';
import DetailsScreen from '../screens/clubs/Details';

class SettingsScreen extends React.Component {
  static navigationOptions = {
    // title: ' Alpha',
    header: null,
  };
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen },
  Details: { screen: DetailsScreen },
});

const SettingsStack = createStackNavigator({
  Settings: { screen: SettingsScreen },
  Details: { screen: DetailsScreen },
});

export default createBottomTabNavigator(
  {
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        }
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: '#DD016B',
      inactiveTintColor: 'white',
      tabStyle: {
          width: 100,
          backgroundColor: 'black',
        },
      labelStyle:{
            color: 'white',
          },
    }
  },
);

Home JS

import React, { Component } from 'react';
import { 
    AppRegistry,
    ListView, 
    View, 
    Text, 
    StyleSheet, 
    Image, 
    Button, 
    TouchableOpacity, 
    TextInput, 
    ScrollView,
    Icon,
    FlatList,
} from 'react-native';
import { createStackNavigator, } from 'react-navigation';

export class HomeScreen extends Component {
    static navigationOptions = {
        // title: ' Alpha',
        header: null,
    };
   ....... App content
}

AppRegistry.registerComponent('App', () => App)

export default createStackNavigator({
  Home: {
    screen: HomeScreen,
  },
}, 

{
    initialRouteName: 'Home',
});

Answer 1

В вашем MainTabNavigator файле попробуйте это:

const HomeStack = createStackNavigator({
  Home: { screen: HomeScreen, navigationOptions: { header: null } },
  Details: { screen: DetailsScreen, navigationOptions: { header: null } },
});