我想显示/隐藏标头取决于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就像我想要的那样,这是有效的,因为没有硬件后退按钮必须有一个标题可以导航回来。但是使用上面的代码,头文件仍然是可见的,即使在我已经给出的情况下也是如此。如何解决这个问题呢?
没有物业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。