具有状态栏警报的ReactNative Flux TabBar路由器

Question

我正在尝试将react-native-router-flux与react-native-statusbar-alert一起使用。在我到达TabBar之前，这项工作没有任何问题。

考虑以下代码（我的）。

 return (
      <View>
      <StatusBarAlert
      visible={this.state.alert.visible}
      backgroundColor={this.state.alert.backgroundColor}
      color={this.state.alert.text}
      message={this.state.alert.msg}
      />
      <Router>
        <Scene key="root">
          <Scene key="loginPage" 
            component={Login} 
            title="Login"
            initial={true}
            hideNavBar={true}
            style={{top: -20}}
            hideStatusBar={this.hideStatusBar.bind(this)}
            showStatusBar={this.showStatusBar.bind(this)}
            />
            <Scene 
              key="tabbar" 
              tabs
              tabBarStyle={styles.tabBarStyle}
              tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle}>
              <Scene key="tab1" component={Settings} title="Settings" hideNavBar={false} icon={TabIcon}/>
              <Scene key="tab2" component={Settings} title="Tab #2" hideNavBar={true} icon={TabIcon}/>
              <Scene key="tab3" component={Settings} title="Tab #3" hideNavBar={true} icon={TabIcon}/>
              <Scene key="tab4" component={Settings} title="Tab #4" hideNavBar={true} icon={TabIcon}/>
            </Scene>
        </Scene>
      </Router>
      </View>
    )

这很有趣。我已尝试删除style: -20（状态栏其他应用程序所需）。

要解决此问题，我必须完全取消<View>，并将<Router>作为顶级元素。然后，这会完美地显示TabBar，但是......

当它显示如此完美时，我无处可以粘贴<StatusBarAlert>，因为它需要在<View>中。我可以把它放在我的每个视图的顶部，但我特别努力地分离并重复我的代码（但是很挣扎！）对ReactNative来说非常新，非常感谢！

包装在<View>和<SatusBar>中的屏幕截图，作为View的第一个节点。

这只是包含在View中，没有状态栏。

这只是没有观点（效果很好）