React native Stylesheet.absoluteFillObject不覆盖选项卡栏以发出应用内消息

Question

我有一个react-native应用，并且想要实现某种应用内消息传递功能。

应用内消息必须弹出整个应用程序，并且可以单击或关闭。

我正在使用这样的渲染创建组件：

// InAppMessage.jsx

render() {
    if (this.state.open) { // if the in-app message needs to be seen
      return (
          <View style={{ zIndex: 1000, ...StyleSheet.absoluteFillObject, borderColor: 'yellow', borderWidth: 2 }}>
            <View style={{ flex: 1, width: '100%', backgroundColor: Colors.semiTransparent, justifyContent: 'center', alignItems: 'center' }}>
              <TouchableHighlight onPress={() => this.navigate('ProfileScreen')}> // just a fixed example
                <View style={{ width: 150, height: 150, backgroundColor: 'red' }}></View>
              </TouchableHighlight>
            </View>
          </View>
      );
    } else return null
  }

然后我将应用内组件添加到这样的任何屏幕中：

// RandomAppScreen.jsx

import InAppMessage from './InAppMessage.jsx'

[...]

render (
    <View>
        <InAppMessage />
        [other specific screen stuff]
    </View>
)

您可以在这里查看结果：

[我正在将react-navigation v3与20个以上的屏幕，堆栈，选项卡和开关导航器一起使用。

InAppMessage组件没有像我想要的那样遍历底部选项卡，为什么？

我该如何实现？

Answer 1

好，我做到了！

幸运的是，我在redux存储中具有导航状态。上帝保佑救赎。

因此层次结构如下：

App  
--> Redux  
    --> ReactNavigation

现在是

App  
--> Redux  
    --> ReactNavigation
    --> InAppMessage

我可以将新的InAppMessage连接到存储并像这样调度动作：

import React from 'react'
import { View, TouchableHighlight, StyleSheet } from 'react-native'
import { Colors } from '../../Themes';
import { connect } from 'react-redux';
import { NavigationActions } from 'react-navigation'

class InAppMessageOverlay extends React.Component {
  constructor(props) {
    super(props);

    this.navigate.bind(this);
    this.state = { open: true };
  }

  navigate(screen) {
    this.setState({ open: false });
    this.props.dispatch(NavigationActions.navigate({ routeName: screen }))
  }

  render() {
    if (this.state.open) {
      console.log(this.props);
      return (
          <View style={{ zIndex: 1000, ...StyleSheet.absoluteFillObject, borderColor: 'yellow', borderWidth: 2 }}>
            <View style={{ flex: 1, width: '100%', backgroundColor: Colors.semiTransparent, justifyContent: 'center', alignItems: 'center' }}>
              <TouchableHighlight onPress={() => this.navigate('ProfileScreen')}>
                <View style={{ width: 150, height: 150, backgroundColor: 'red' }}></View>
              </TouchableHighlight>
            </View>
          </View>
      );
    } else return null
  }
}

const mapStateToProps = (state) => ({
  state,
})

export default connect(mapStateToProps)(InAppMessageOverlay)

我将使用redux状态而不是组件状态，但是我太退出了以至于无法共享此状态