Как вложить сцену и перемещаться с direction='vertical' в React Native Router Flux?

Question

Я хотел бы, чтобы гнездо реакции-родной-маршрутизатор-поток <Scene/> и попытался следующее, но я не могу перейти к <Scene component={Home}/> от <Scene component={Profile}/>:

<Scene
  component={Home}
  initial={true}
  key='home'
  title='Home'
  type='reset'
>
    <Scene
      component={Profile}
      direction='vertical'
      key='sell'
      title='Sell'
    />
</Scene>

Я хотел бы вложить Profile компонент внутри Home компонент, потому что к нему можно получить доступ только через Home составная часть.

Так как я могу правильно гнездиться Profile компонент внутри Home составная часть?

Когда я также перехожу к Profile компонент, он перемещается с vertical направление, но когда он пытается перейти к другому компоненту (например, Actions.test()), которой нет direction='vertical' установить, от Profile компонент, он перемещается по горизонтали, когда он должен быть вертикально, в то время как нажатие кнопки назад в пределах Profile компонент перемещается обратно с vertical направление.

Так как я перешел на Profile составная часть vertically как я могу получить Profile компонент должен быть демонтирован vertically при навигации, даже при переходе к компоненту без direction='vertical' ?

Answer 1

Вот как я могу заставить это работать в моем приложении:

<Router createReducer={reducerCreate} getSceneStyle={getSceneStyle}>
        <Scene key="root">
          <Scene key="login" direction="vertical" component={Login} title={I18n.t("login_page_nav_title")} hideTabBar hideNavBar initial={!this.state.isLoggedIn}/>
          <Scene key="addaccount" direction="vertical" component={Login} title={I18n.t("login_page_nav_title")} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} backTitle={I18n.t("back_button")} hideTabBar />
          <Scene key="tabbar">
            <Scene key="main" tabs tabBarStyle={styles.tabBarStyle} tabBarSelectedItemStyle={styles.tabBarSelectedItemStyle} tabBarIconContainerStyle={styles.tabBarIconContainerStyle} >
              <Scene key="courses" component={Courses} title={I18n.t("courses_tab_title")} icon={IconCourses} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="register"  component={Register} title={I18n.t("register_tab_nav_title")} icon={IconRegister} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="schedule" component={Schedule} title={I18n.t("schedule_page_nav_title")} icon={IconSchedule} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="evaluation" component={Evaluation} title={I18n.t("evaluation_page_nav_title")} icon={IconEvaluation} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} />
              <Scene key="profile" component={Profile} title={I18n.t("profile_page_nav_title")} icon={IconProfile} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle}/>
            </Scene>
          </Scene>
          <Scene key="terms" component={Terms} hideTabBar hideNavBar />
          <Scene key="grab" component={Grab} hideTabBar hideNavBar initial={this.state.isLoggedIn}/>
          <Scene key="rdetails" component={RDetails} title={I18n.t("details_page_nav_title")} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} backTitle={I18n.t("back_button")} hideTabBar />
          <Scene key="cdetails" component={CDetails} title={I18n.t("details_page_nav_title")} navigationBarStyle={styles.navigationBarStyle} titleStyle={styles.titleStyle} backButtonTextStyle={styles.backButtonTextStyle} backTitle={I18n.t("back_button")} hideTabBar />
        </Scene>
      </Router>

Таким образом, я могу перемещаться по всем сценам, вложенным в tabbar / main, и переходить от курсов к регистрации или, например, к профилю. я также могу переходить к терминам. Но навигация от cdetails к курсам или профилю невозможна, насколько я знаю. я могу только перейти на вкладку из терминов или захватить. Но поскольку захват и условия объявлены на более высоких уровнях, они доступны на более глубоких уровнях.

Надеюсь, поможет.

---

Обновить:

Поскольку я переместился к компоненту профиля по вертикали, как я могу сделать так, чтобы компонент профиля был размонтирован по вертикали при навигации, даже при переходе к компоненту без direction='vertical'?

Не уверен, но я думаю, что при переходе от профиля к другому компоненту вы не видите, что профиль отключается. если вы хотите размонтировать его по вертикали, вам нужно сделать Action.pop() таким образом, чтобы это работало. Вы также можете использовать несколько действий вместе, как это:

Action.pop();
Action.SomeComponent({type: 'reset'});