在react-navigation导航头部上绝对定位

11

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

你能举个例子详细说明你现在拥有什么以及你想要实现什么吗? - lilezek
当然,已经添加更多。 - Turnipdabeets
为什么你的宽度和高度既使用视口单位又使用百分比单位? - lilezek
有人建议使用视口,所以我添加了它,但无论如何都没有起作用。 - Turnipdabeets
使用视口(例如高度),您应该写成:100vh,而不是100vh% - lilezek
1个回答

17

根据您的问题,我理解您想在所有组件,包括导航标题上方,呈现一个带有不透明度的spinner组件。

一种方法是渲染一个Modal组件来包装您的spinner。Modal组件占据整个屏幕,您可以为其提供 transparent=true 参数。并且可以自定义Modal的父视图,设置背景色与不透明度,如下所示。然后在任何地方显示/隐藏此Modal组件以处理加载。

请参考以下演示:https://snack.expo.io/SyZxWnZPZ

以下是示例代码:

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',
  },
});

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接