我正在制作一个加载屏幕,并将其设置为绝对定位整个屏幕。但是,使用react-navigation
时,似乎无法覆盖标题。是否有一种方法可以将我的组件放置在导航库的标题组件上面?
当使用react-navigation
时,您可以为该屏幕配置标题。通常,当您导航到屏幕时,在该屏幕中呈现的任何代码都会自动放置在导航标题下方。但是,我希望我的组件占据整个屏幕并覆盖标题。我希望标题保持不变,但我想用透明度覆盖它。这可能吗?
const navigationOptions = {
title: "Some Title",
};
const Navigator = StackNavigator(
{
First: { screen: ScreenOne },
Second: { screen: ScreenTwo },
...otherScreens,
},
{
transitionConfig,
navigationOptions, //this sets my header that I want to cover
}
);
这是我的loader.js文件
const backgroundStyle = {
opacity: 0.5,
flex: 1,
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 1,
};
const Loading = () =>
<View style={backgroundStyle}>
<PlatformSpinner size="large" />
</View>;
在ScreenOne.js文件中
class ScreenOne extends Component {
render(){
if(loading) return <Loading/>;
return (
//other code when not loading that is placed under my header automatically
)
}
}
100vh
,而不是100vh%
。 - lilezek