Question

我正在制作加载屏幕，并且我已将其设置为整个屏幕的绝对位置。但是，当使用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
   )
  }
}

Answer 1

根据您的问题，我理解的是，您希望将微调器组件渲染到所有其他组件之上，包括具有不透明度的导航标题。

执行此操作的一种方法是呈现包裹Modal的{{1}}组件。模态组件采用全屏幕，您可以提供道具spinner。并自定义模态的父视图以使transparent = true如图所示。现在在任何地方显示/隐藏此Modal组件以处理加载。

使用零食进行演示：https://snack.expo.io/SyZxWnZPZ

以下示例代码

background colour with opacity

Answer 2

将header: null添加到navigationOptions以关闭标头：

class ScreenOne extends Component { 
    static navigationOptions = {
      header: null
    }
    ...
}

反应导航导航头顶部的绝对位置

2 个答案: