使用本机嵌套反应来本机嵌套导航

Question

进行下图所示的嵌套导航的最佳方法是什么？

应用程序结构如下

BottomTabNavigator/
├── Timeline.js
├── Tables/
│   ├── Tables.js
│   │    ├── NewTableModal.js
│   │    └── EditTableModal.js
│   ├── Rooms.js
│   ├── Space.js
│   └── Hours.js
│        ├── NewOpenHoursModal.js
│        └── EditOpenHoursModal.js
├── Space/
└── Settings/

我当前的方法是使用createBottomTabNavigator（）作为主要导航。在“表格”屏幕上，顶部还有另一个自定义导航。我作为组件FloatNavigator.js进行了顶部导航。

它基本上呈现4个带有操作的按钮，以导航到屏幕。

//FloatNavigator.js

changeView = view => {
    this.props.navigation.navigate(view);
  };


...


  render() {
    const { changeView } = this;

    return (
      <View style={[floatNavigatorStyle.mainContainer]} pointerEvents="box-none">
        <View style={[floatNavigatorStyle.container]} pointerEvents="box-none">
          <View style={[floatNavigatorStyle.topBarContainer]} pointerEvents="box-none">
            <View style={floatNavigatorStyle.topBarSpace}>
              <SwitchSelector
                options={options}
                initial={0}
                onPress={value => changeView(value)}
                style={[floatNavigatorStyle.topBarItem, { width: 340 }]}
              />
            </View>
          </View>
        </View>
      </View>
    );
  }
}

此导航包含在“表”下的每个屏幕中作为标题。导航器具有绝对位置，它浮动在顶部，因此我能够在同一行的每个屏幕上放置按钮。

// in Tables.js, Rooms.js, Space.js and Hours.js
static navigationOptions = {
  header: <FloatNavigator />,
};

“ +营业时间”之类的按钮导航到在前一个视图上方呈现的“模态”屏幕。

我的导航堆栈。

const TablesStack = createStackNavigator(
  {
    tables: GroupsView,
    openHours: OpenHoursView,
    rooms: RoomsView,
    models: ModelsView
  }
);


// modal screens
const TablesModalStack = createStackNavigator(
  {
    Main: TablesStack,
    newTable: NewTableModal,
    newOpenHours: NewOpenHoursModal,
    updateTable: UpdateTableModal,
    updateOpenHours: UpdateOpenHoursModal,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transparentCard: true
  }
);


const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    TablesModalStack,
    RoomStack,
    SettingsStack,
  }
);

问题是，每次我在它们之间切换时，屏幕（表，房间，模型，小时数）都会重新安装。我还尝试在浮动导航器中使用关键道具，但屏幕仍会重新安装。

  changeView = view => {
    this.props.navigation.navigate(view, null, null, view);
  };

如何实现此功能，以便TablesStack的行为与createBottomTabNavigator相同？有没有办法在嵌套堆栈导航中预加载lazy=false屏幕？

如果我不使用嵌套堆栈的导航，而是仅使用一个屏幕在顶部的导航，将全部4个屏幕导入为组件并根据状态进行渲染，这是一个好主意吗？

类似这样的东西：

changeView = view => {
   this.setState({
     currentView: view
   });
 };

render() {
    const { changeView } = this;
    const { currentView } = this.state;

    return (
      <View style={[floatNavigatorStyle.mainContainer]} pointerEvents="box-none">
        <FloatNavigator/>
        {currentView === "tables" ? <Tables/>}
        {currentView === "hours" ? <Hours/>}
        ...

      </View>
    );
}