Actions.popTo(tabBarKey) ломает приложение. - React Native Router Flux

В моем текущем приложении пользователь заполняет форму, состоящую из разных сцен, и как только будет достигнута последняя сцена формы и отправка будет успешной, я хочу "popTo" вернуться к исходной сцене. Однако эта начальная сцена находится внутри тега <Tabs>, и я думаю, что это причина, по которой она ломает мое приложение.

Это мой Router.js:

const RouterComponent = () => {
return (
<Router>
  <Scene key="root">
    <Scene key="spinnerBucket">
      <Scene
        key="spinner"
        component={SpinnerComponent}
        initial
        hideNavBar
        panHandlers={null}
      />
    </Scene>

    <Scene key="authBucket">
      <Scene
        key="login"
        component={LoginComponent}
        initial
        hideNavBar
        panHandlers={null}
      />
    </Scene>


    <Tabs
      lazy
      headerMode="none"
      key="tabBar"
      navBar={NavigationComponent}
      tabBarPosition={'bottom'}
     >
      <Scene
        key="home"
        initial
        component={HomeComponent}
        panHandlers={null}
        />

      <Scene
        key="profile"
        component={ProfileComponent}
        panHandlers={null}
        />

      <Scene
        key="activeJobs"
        component={ActiveJobsComponent}
        panHandlers={null}
        />

      <Scene
        key="favorites"
        component={FavoritesComponent}
        panHandlers={null}
        />

      <Scene
        key="inbox"
        component={InboxComponent}
        panHandlers={null}
        />
    </Tabs>


    <Scene
      key="displayOffer"
      hideNavBar
      component={DisplayOffersComponent}
      panHandlers={null}
    />

    <Scene
      key="selectJob"
      hideNavBar
      component={SelectJobComponent}
      panHandlers={null}
    />

    <Scene
      key="createJob"
      hideNavBar
      component={JobScheduleComponent}
      panHandlers={null}
    />

    <Scene
      key="define_title"
      hideNavBar
      component={DefineTitleComponent}
      panHandlers={null}
    />

    <Scene
      key="requirements"
      hideNavBar
      component={RequirementsComponent}
      panHandlers={null}
    />

    <Scene
      key="quantity_question"
      hideNavBar
      component={QuantityQuestionComponent}
      panHandlers={null}
    />

    <Scene
      key="add_comments"
      hideNavBar
      component={AddCommentsComponent}
      panHandlers={null}
    />

    <Scene
      key="multiple_choice"
      hideNavBar
      component={MultipleChoiceComponent}
      panHandlers={null}
    />

    <Scene
      key="infoMissing"
      hideNavBar
      component={InfoMissingComponent}
      panHandlers={null}
    />

    <Scene
      key="user_description"
      hideNavBar
      component={JobDetailsComponent}
      panHandlers={null}
    />

    <Scene
      key="jobDetailsPhotos"
      hideNavBar
      component={JobTagsAndPhotosComponent}
      panHandlers={null}
    />

    <Scene
      key="googlePlaces"
      hideNavBar
      component={GooglePlacesComponent}
      panHandlers={null}
    />

    <Scene
      key="chat"
      hideNavBar
      component={ChatComponent}
      panHandlers={null}
    />

    <Scene
      key="publicProfile"
      hideNavBar
      component={PublicProfileComponent}
      panHandlers={null}
    />
  </Scene>
</Router>
);
};

Теперь проблема возникает, когда я нахожусь в

    <Scene
      key="jobDetailsPhotos"
      hideNavBar
      component={JobTagsAndPhotosComponent}
      panHandlers={null}
    />

и я звоню Actions.popTo("tabBar");. Приложение просто зависает и ломается. Мой вопрос: виновата ли структура моих сцен или есть особый способ всплывать на вкладку?

Моя цель - вернуться к <Scene key="home"/>.


person Walter Monecke    schedule 26.11.2017    source источник
comment
Вы пытались попасть домой напрямую?   -  person Tim    schedule 26.11.2017
comment
@TimH Ты имеешь в виду Actions.popTo('home');? Я пробовал это, и это также ломает приложение, потому что оно находится внутри тега Tabs   -  person Walter Monecke    schedule 27.11.2017


Ответы (3)


Вы должны использовать только «листовые» клавиши сцены для popTo.

person aksonov    schedule 28.11.2017
comment
Привет, @aksonov, спасибо за ответ. Не могли бы вы уточнить немного больше? Я до сих пор не понимаю... В моем случае, как мне правильно вернуться к панели вкладок, правильно размонтировав стек? - person Walter Monecke; 29.11.2017
comment
Реализация popTo прямо сейчас довольно проста - она ​​"выскакивает" до тех пор, пока имя сцены не будет таким же, как задано. Вот почему поддерживаются только «листовые» ключи (т. е. определенные вкладки, которые существуют в вашем стеке). Для вашего варианта использования вам, вероятно, нужно использовать replace - person aksonov; 29.11.2017
comment
Actions.replace('home') также перемещает меня к сцене с ключом home, однако он не размонтирует другие представления правильно. Я также достиг этого, просто выполнив Actions.home(). - person Walter Monecke; 29.11.2017
comment
Я думаю, что должна быть поддержка и для родителя. Я просто почувствовал необходимость перейти на родительскую вкладку. Надеюсь, мы увидим это в будущих версиях. Слава! - person Singh; 30.05.2018

Actions.popTo отлично работает, просто используйте его так:

Actions.popTo("sceneName");

Версия:

"react": "16.0.0",
"react-native": "^0.51.0",
"react-native-router-flux": "^4.0.0-beta.28",
person Hemant Mali    schedule 10.03.2018

Вы можете явно добавить свою сцену в стек, выполнив Actions.theNameForYourScene при запуске перед основной сценой, чтобы иметь возможность всплывать после нее. Это не рекомендуется, но это работает.

person Slimani Yassine    schedule 26.04.2018