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' 1}}设置，从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中嵌套的所有场景我可以从课程导航到注册或例如个人资料。我也可以导航到术语抓住rdetails和cdetails。但据我所知，不可能从cdetails导航到课程或简介。我只能从术语导航到tabbar或抓取。但是由于抓取和术语被宣布为更高级别，因此可以在更深层次上访问它们。

希望它有所帮助。

更新：

由于我垂直导航到Profile组件，我怎么能得到即使在导航时也要垂直卸载的配置文件组件导航到没有direction ='vertical'的组件时？

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

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

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

1 个答案: