反应导航标题始终显示

Question

我试图创建多个屏幕并在它们之间切换，我认为反应导航会很棒。但是，尽管将header设置为null，我还是会出现标题自动出现的问题。 我的App.js createStackNavigation为：

const AppNavigator = createStackNavigator({


register : {
  screen: RegisterScreen, 
},

login: {
  screen: LoginScreen,
},

home : {
  screen: HomeScreen
},

  },

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

在这里，我有三个屏幕。即注册，登录和回家。在注册屏幕内，我还有其他createStackNavigator用于registerFinal，登录和注册屏幕本身。如下所示。

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而不是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'
        }),
    }
);

希望这会有所帮助！

Answer 4

headerMode: 'none'不应位于navigationOptions内：

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

Answer 5

大多数情况下，您需要重新启动EXPO或RN cli才能使Simulator进行更改。

---

这是在一个屏幕上隐藏标题的方式

`yourComponentName`.navigationOptions = () => {
    return {
        headerShown: false
    }
}

//above code needs to be before you EXPORT your component

export default `yourComponentName`

您还可以在所有屏幕上隐藏header，这样检查。

提示：您可以在导航器中添加headerShown: false来为所有屏幕设置选项，而不是在每个屏幕的选项中添加screenOptions={{ headerShown: false }}。

https://medium.com/@satya164/tip-instead-of-adding-headershown-false-to-each-screens-option-you-can-padd-screenoptions-f67baf1e1eae][1]