Реагируйте на встроенную навигацию с помощью реагирующей навигации

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