反应导航导航标题顶部的绝对位置
我正在制作加载屏幕,并将其设置为绝对位置整个屏幕。但是,当使用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
)
}
}
从你的问题WH在我明白的是,你想渲染一个微调组件,高于所有其他组件,包括具有不透明度的导航标题。
执行此操作的一种方法是渲染一个Modal
组件,该组件包装您的spinner
。模式组件需要全屏,你可以给道具transparent = true
。如图所示,自定义Modal的父视图background colour with opacity
。现在显示/隐藏这个模态组件处理加载。
演示使用小吃:下面
import React, { Component } from 'react';
import { View, StyleSheet,Modal,ActivityIndicator,Button } from 'react-native';
import { Constants } from 'expo';
export default class App extends Component {
state = {
isShowModal: false,
}
render() {
return (
<View style={styles.container}>
<Button title='show modal' onPress={() => this.setState({isShowModal: true})} />
{this.state.isShowModal && this.showModal()}
</View>
);
}
showModal() {
setTimeout(() => this.setState({isShowModal: false}), 5000); // just to mimic loading
return(
<Modal
animationType='fade'
transparent={true}
visible={true}>
<View style={{flex:1,backgroundColor:'rgba(0,0,0,.2)'}}>
<ActivityIndicator size='large' color='red' style={{flex:1}} />
</View>
</Modal>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
谢谢,我忘记了Modal会覆盖所有内容,即使其他内容呈现在导航标题下方时也是如此。 – Turnipdabeets
很好的答案。这就是我从文档中错过的东西。谢谢。 – Val
添加header: null
到navigationOptions
驳回头:
class ScreenOne extends Component {
static navigationOptions = {
header: null
}
...
}
我不想解雇标题。我只想要一个组件以不透明的方式来覆盖它。 – Turnipdabeets
https://snack.expo.io/SyZxWnZPZ
示例代码,请你的你有什么和你想达到什么样的一个例子详细点吗? – lilezek
当然,增加更多 – Turnipdabeets
为什么你的宽度和高度是在视口单位和百分比单位? – lilezek