javascript - 如何在 React Native Router Flux 中嵌套场景并使用方向 ='vertical' 导航？

Question

我想嵌套 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组件，它应该垂直导航时水平导航，而在 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 中的所有场景 我可以从类(class)导航到注册或例如个人资料。 我还可以导航到术语 grab rdetails 和 cdetails。 但据我所知，从 cdetails 导航到类(class)或个人资料是不可能的。我只能从条款或抓取导航到标签栏。 但由于 grab 和 terms 是在更高级别声明的，因此可以在更深的级别访问它们。

希望对您有所帮助。

---

更新:

Since I navigated to Profile component vertically, how can I get the Profile component to be unmounted vertically when navigating, even when navigating to a component without direction='vertical'?

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

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