反应导航导航标题顶部的绝对位置

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

来源

2017-08-02 Turnipdabeets

https://snack.expo.io/SyZxWnZPZ

示例代码，请你的你有什么和你想达到什么样的一个例子详细点吗？ – lilezek

当然，增加更多 – Turnipdabeets

为什么你的宽度和高度是在视口单位和百分比单位？ – lilezek

从你的问题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', 
    }, 
});

来源

2017-08-04 08:47:53

谢谢，我忘记了Modal会覆盖所有内容，即使其他内容呈现在导航标题下方时也是如此。 – Turnipdabeets

很好的答案。这就是我从文档中错过的东西。谢谢。 – Val

添加header: null到navigationOptions驳回头：

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

来源

2017-08-03 04:03:14 Val

我不想解雇标题。我只想要一个组件以不透明的方式来覆盖它。 – Turnipdabeets

反应导航导航标题顶部的绝对位置

回答

相关问题