Заголовок React Navigation всегда отображается

Question

Я пытаюсь создать несколько экранов и переключаться между ними, я думал, что реакция навигации будет отличной. Но я получаю эту проблему появления заголовка автоматически, несмотря на установку заголовка на ноль. У меня есть App.js createStackNavigation как:

const AppNavigator = createStackNavigator({


register : {
  screen: RegisterScreen, 
},

login: {
  screen: LoginScreen,
},

home : {
  screen: HomeScreen
},

  },

  {
    navigationOptions: {
      header:null,
      headerMode: 'none',
    }
  }
  );

Здесь у меня есть три экрана. А именно зарегистрироваться, залогиниться и домой. Внутри экрана регистрации у меня есть другой createStackNavigator для регистрации финала, входа в систему и регистрации самого экрана. Это показано ниже.

const registerNavigation = createStackNavigator(
    {
        register: {
            screen: RegisterScreen,
            headerMode: 'none',
            navigationOptions: ({ navigation }) => ({
                header: null,
              }),
        }, 
        registerFinal: {
            screen: RegisterFinalScreen, 
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerShown: false

              }),
        } ,
        login: {
            screen: LoginScreen, 
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerShown: false
              }),
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            header: null,
            headerShown: false
          }),
    }
    );

Несмотря на то, что я отключил заголовок в navigationOptions, используя оба метода, как указано в других вопросах, ни один из них, похоже, не работает для меня. Я получаю два заголовка на моем экране. Как мне это решить?

Answer 1

Перезапуск эмулятора решил проблему. О, МОЙ БОГ. Эта вещь заставила меня изменить свой проект так много раз. Но иногда нужно просто посмеяться над этим.

Answer 2

Другой способ скрыть заголовки:

export default class LoginPage extends Component{
  static navigationOptions = { // remove header on this page
      header: null
  }
}

Answer 3

headerMode: 'none' не должно быть внутри navigationOptions:

const AppNavigator = createStackNavigator({
 // ...
}, {
  // No `navigationOptions` here
  headerMode: 'none'
})

Answer 4

Используйте headerMode, а не headerShown в стеке регистрации.

В основном измените свой стек регистрации, чтобы отразить следующее:

const registerNavigation = createStackNavigator(
    {
        register: {
            screen: RegisterScreen,
            headerMode: 'none',
            navigationOptions: ({ navigation }) => ({
                header: null,
            }),
        },
        registerFinal: {
            screen: RegisterFinalScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'

            }),
        },
        login: {
            screen: LoginScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'
            }),
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            header: null,
            headerMode: 'none'
        }),
    }
);const registerNavigation = createStackNavigator(
    {
        register: {
            screen: RegisterScreen,
            headerMode: 'none',
            navigationOptions: ({ navigation }) => ({
                header: null,
            }),
        },
        registerFinal: {
            screen: RegisterFinalScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'

            }),
        },
        login: {
            screen: LoginScreen,
            navigationOptions: ({ navigation }) => ({
                header: null,
                headerMode: 'none'
            }),
        },
    },

    {
        navigationOptions: ({ navigation }) => ({
            header: null,
            headerMode: 'none'
        }),
    }
);

Надеюсь, это поможет!