如何嵌套场景并在React Native Router Flux中使用direction ='vertical'进行导航？

Question

我想嵌套react-native-router-flux <Scene/>并尝试以下方法,但我无法导航到<Scene component={Home}/>from <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>

这样我就可以导航到嵌套在选项卡栏/主目录中的所有场景，我可以从课程导航到注册或例如个人资料。我还可以导航到术语“grab rdetails”和“cdetails”。但据我所知，从 cdetails 导航到课程或个人资料是不可能的。我只能从术语或抓取导航到选项卡栏。但由于抓取和条款是在更高级别声明的，因此可以在更深级别访问它们。

希望能帮助到你。

更新 ：

由于我垂直导航到 Profile 组件，因此如何在导航时垂直卸载 Profile 组件，即使在导航到没有 Direction='vertical' 的组件时也是如此？

不确定，但我认为当您从配置文件导航到另一个组件时，您看不到配置文件正在卸载。如果你想垂直卸载它，你需要这样做 Action.pop() 这样应该可以工作。您还可以像这样一起使用几个操作：

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