显示/隐藏导航标题取决于react-native中的平台

问题描述 投票:0回答:1

我想显示/隐藏标头取决于react-native中的平台。我做到了这一点

  const RNApp = createStackNavigator(
  {
    Menu: {
      screen: Menu,
      navigationOptions: {
        gesturesEnabled: false,
        headerBackground: (
          <Image
            style={[
              StyleSheet.absoluteFill,
              {
                width: Metrics.screenWidth * 0.5,
                height: Metrics.navBarHeight * 0.6,
                marginTop:
                  Platform.OS === "ios"
                    ? Metrics.navBarHeight * 0.45
                    : Metrics.navBarHeight * 0.2,
                marginLeft: Metrics.screenWidth * 0.25,

                resizeMode: "contain"
              }
            ]}
            source={images.icons.headerimage}
          />
        )
      }
    },
    WebViewScreen: {
      screen: WebViewScreen,
      navigationOptions: {
        headerVisible: Platform.OS === "ios" ? true : false,
        gesturesEnabled: false
      }
    }
  },
  {
    headerMode: "screen",
    initialRouteName: "Menu"
  }
);

如果平台是ios就像我想要的那样,这是有效的,因为没有硬件后退按钮必须有一个标题可以导航回来。但是使用上面的代码,头文件仍然是可见的,即使在我已经给出的情况下也是如此。如何解决这个问题呢?

javascript react-native header react-navigation
1个回答
1
投票

没有物业headerVisible。您要找的房产是header

React Element或给定HeaderProps返回React元素的函数,以显示为标题。设置为null隐藏标题。

在你的情况下,它必须是:

import { Header } from 'react-navigation'; // import the default header to use it for iOS

...

navigationOptions: {
    header: (headerOptions) => Platform.OS === 'android' ? null : <Header {...headerProps} />,
    gesturesEnabled: false
}

另见here

© www.soinside.com 2019 - 2024. All rights reserved.