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

Question

我正在尝试向 react-navigation 导航器添加叠加层（例如显示错误 popups/toasters/debug 按钮等）。

但是我有一个问题：

当我将 React 导航器 放在视图 中并在顶部覆盖时，React 导航器要么不显示，要么以某种方式扭曲。

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-

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

这行得通吗？怎么样？

Answer 1

稍微更改了您的代码

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.

中的绝对绝对定位

如果你想覆盖在导航栏上方，你可以用 navigationOptions.headerRight 做类似的事情。

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

Add an overlay to a react-navigation navigator

react-native

react-navigation