向反应导航导航器添加叠加层

我正在尝试向react-navigation导航器添加叠加层（例如，显示错误弹出窗口/多士炉/调试按钮等）。向反应导航导航器添加叠加层

但是我有一个问题：

当我把反应导航在视图，顶部覆盖的反应要么导航不显示或以某种方式被扭曲。

import React, { Component } from 'react'; 
import { Text, View } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    return <Text>Hello, Navigation!</Text>; 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
}); 

class SimpleAppWithOverlay extends React.Component { 
    render() { 
    return( 
     <View> 
     <View style={{position: "absolute", backgroundColor:"transparent", margin:30}}> 
      <Text>Some Overlay</Text> 
     </View> 
     <SimpleApp/> 
     </View>); 
    } 
}

这里有两个片段展示了我的意思在现场编辑：

基本反应导航设置：https://snack.expo.io/ryI4oCvQW
相同，但具有覆盖尝试：https://snack.expo.io/HkSgoCDX-

您可以在第二个示例中看到叠加层出现，但底层应用只是不可见。

可以工作吗？怎么样？

来源

2017-06-21 Daniel Neal

我知道愚蠢的问题，但你的覆盖背景是透明的，你是否将它定位在基本图层的上方：'position'，'absolute''？ –

@MilanGulyas谢谢 - 愚蠢的问题仍然有帮助！ :)我*是*使用'position：absolute'，但* not *'backgroundColor：transparent'。不过，我试过https://snack.expo.io/HyzBWWdQW和反应导航器仍然没有显示。所以如果我不做一些愚蠢的行为（我的第一个假设），也许它正在做一些聪明的事情 - 在这种情况下，问题是 - 我们怎么聪明呢？ –

你可以用上面的相关代码编辑上面的问题吗？没有这一点很难猜测。 –

改变了你的代码有点

import React, { Component } from 'react'; 
import { AppRegistry, Text, View } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    return (
     <View style={{ flex: 1 }}> 
     <Text>Hello, Navigation!</Text> 
     </View> 
    ) 
    } 
} 

class SimpleAppWithOverlay extends React.Component { 
    render() { 
    return (
     <View style={{flex: 1}}> 
     <SimpleApp /> 
     <View style={{ position: "absolute", backgroundColor: 'rgba(255,0,0,0.4)', top: 0, bottom: 0, left: 0, right: 0 }}> 
      <Text style={{ paddingTop: 8 }}>Some Overlay</Text> 
     </View> 
     </View> 
    ); 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
}); 

AppRegistry.registerComponent('overlayapp',() => SimpleAppWithOverlay);

你应该注意到，position: 'absolute'只父是绝对不喜欢绝对在CSS定位相对。

如果你想叠加在navigationBar上面，你可以做一些类似于navigationOptions.headerRight的事情。

来源

2017-06-21 15:27:15

是否可以覆盖导航器本身或仅覆盖屏幕？ –

在我的真实例子中，我有很多路由，而不仅仅是一个，我想在顶层有一个覆盖层（例如，在开发模式下有一个浮动调试按钮）。 –

对不起，我的问题可能不清楚...... –

向反应导航导航器添加叠加层

回答

相关问题