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

Я хотел бы, чтобы гнездиться реагировать родной-маршрутизатор потока - х <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компонента он перемещается по горизонтали, когда он должен быть профилированным, тогда как нажатие кнопки возврата в verticalкомпоненте перемещается назад с verticalнаправлением.

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

javascript,react-native,react-jsx,react-native-router-flux,

7

Ответов: 1

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, я могу перемещаться из курсов для регистрации или, например, профиля. Я также могу перейти к терминам grab rdetails и cdetails. Но переходить с cdetails на курсы или профиль невозможно, как я знаю. Я могу только перейти на вкладку с терминов или захватить. Но так как захват и условия объявлены на более высоких уровнях, они доступны на более глубоких уровнях.

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

Обновить :

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

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

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

JavaScript, реагирует родной, среагировать-JSX, реагирует родной-маршрутизатор-поток,
Похожие вопросы
Яндекс.Метрика