react-native-router-flux：切换标签时如何保留父导航栏？

Question

我的路由器中目前有以下内容：

<Scene key="results" title="Query Results"
    tabs={true} tabBarStyle={style.tabBarStyle}>
    <Scene
      key="listResultsTab"
      title="List"
      icon={TabIcon}
    >
      <Scene key="listResults" component={ListResultsScene} title="Results List" />
    </Scene>

    <Scene
      key="mapResultsTab"
      title="Map"
      icon={TabIcon}
    >
      <Scene key="mapResults" component={MapResultsScene} title="Results Map" />
    </Scene>
</Scene>

到目前为止，它创建了一个带有两个选项卡的选项卡栏，这两个选项卡在 ListResults 和 MapResults 组件之间交替，这正是我想要的。但是，每个选项卡都有自己的导航栏。这不一定是问题，只是它会覆盖父导航栏，因此我无法访问查询结果之前的任何内容。

我的理想设置是这样的：

launchScreen --> queryResults----->listResults -> ... ->
                   |
                   -->mapResults-> ... ->

有没有办法在标签之间切换时保留 queryResults 的导航栏？

docs 说

每个标签都有自己的导航栏。但是，如果您未将其父级设置为 hideNavBar={true}，则选项卡的导航栏将被其父级覆盖。

然而，情况似乎并非如此。我没有使用 hideNavBar 并且父导航栏仍然被选项卡覆盖。我想也许我可以在选项卡上使用 hideNavBar，但这只会完全删除 navBar。

编辑：更新更详细的信息。

这是我的完整场景列表。

import React from 'react';
import {StyleSheet, Text } from 'react-native';
import { Actions, Scene, ActionConst } from 'react-native-router-flux';
import LaunchScene from '../scenes/LaunchScene';
import LoginScene from '../scenes/LoginScene';
import WorkspaceSelectionScene from '../scenes/WorkspaceSelectionScene';
import QuerySelectionScene from '../scenes/QuerySelectionScene';
import EditQueryScene from '../scenes/EditQueryScene';
import ListResultsScene from '../scenes/ListResultsScene';
import MapResultsScene from '../scenes/MapResultsScene';

const style = StyleSheet.create({
        tabBarStyle: {
            borderTopWidth : .5,
            borderColor    : '#b7b7b7',
            backgroundColor: 'white',
            opacity: 1
        },
        padForNavBar: {
          paddingTop: 64
        }
});

const TabIcon = ({ selected, title }) => {
  return (
    <Text style={{color: selected ? 'red' :'black'}}>{title}</Text>
  );
}

const scenes = Actions.create(
  <Scene key="root">
    <Scene key="login" component={LoginScene} title="Login" sceneStyle={style.padForNavBar} />
    <Scene key="workspaceSelection" component={WorkspaceSelectionScene}
      title="Workspace Selection" sceneStyle={style.padForNavBar} />
    <Scene key="querySelection" component={QuerySelectionScene}
      title="Query Selection" sceneStyle={style.padForNavBar} />
    <Scene key="launch" component={LaunchScene} title="Launch" sceneStyle={style.padForNavBar} />
    <Scene key="editQuery" component={EditQueryScene} title="Edit Query" sceneStyle={style.padForNavBar} />
    <Scene key="results" title="Query Results"
        tabs={true} tabBarStyle={style.tabBarStyle}>
        <Scene
          key="listResultsTab"
          title="List"
          icon={TabIcon}
        >
          <Scene key="listResults" component={ListResultsScene} title="Results List" sceneStyle={style.padForNavBar} />
        </Scene>

        <Scene
          key="mapResultsTab"
          title="Map"
          icon={TabIcon}
        >
          <Scene key="mapResults" component={MapResultsScene} title="Results Map" sceneStyle={style.padForNavBar} />
        </Scene>
    </Scene>
  </Scene>
);

export default scenes

当我点击嵌套在结果场景中的 listResults 选项卡时，这就是我的选项卡的样子。请注意，我仍然可以返回到以前的页面。

但是当我将选项卡切换到 mapResults 选项卡时，仍然在结果场景中，导航栏被重置。我不再可以使用后退按钮。切换回 listResults 不会恢复它。

Answer 1

作为更新，这被证明是库的问题。一个问题已打开，并在随后的提交中得到纠正。

Answer 2

哥们，我有东西要给你，把它添加到你的场景中，它会阻止你的状态重置。 type={ActionConst.REFRESH}

这将刷新您的堆栈，或者您可以这样做：

componentDidMount(){
Actions.refresh({backTitle: ()=> this.props.title})
}

要从堆栈中弹出的位置。

干杯:)