向 react-navigation 导航器添加覆盖层 [英] Add an overlay to a react-navigation navigator

问题描述

我正在尝试向 react-navigation 添加叠加层(例如，显示错误弹出窗口/烤面包机/调试按钮等)a> 导航器.

I'm trying to add an overlay (e.g. to display error popups/toasters/debug buttons etc) to a react-navigation navigator.

但是我有一个问题:

当我将反应导航器放在视图中时，当覆盖层位于顶部时，反应导航器要么不出现，要么以某种方式扭曲.

When I put the react navigator in a view, with the overlay on top, the react navigator either doesn't appear or is distorted in some way.

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

这里有两个片段显示了我在实时编辑器中的意思:

Here are two snippets showing what I mean in a live editor:

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

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

You can see in the second example, the overlay appears but the underlying app is just not visible.

这能行吗?怎么样?

推荐答案

稍微改变了你的代码

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 中那样绝对绝对.

You should note that position: 'absolute' is only positioning relative to the parent not absolutely absolute like in css.

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

If you want to overlay above the navigationBar you can probably do something similar with navigationOptions.headerRight.

这篇关于向 react-navigation 导航器添加覆盖层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！