7

我想嵌套 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方向。

由于我导航到Profilecomponent vertically，如何在导航时Profile卸载组件vertically，即使导航到没有组件的组件direction='vertical'？

4

1 回答 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>

通过这种方式，我可以导航到嵌套在选项卡/主菜单中的所有场景，我可以从课程导航到注册或例如个人资料。我还可以导航到术语抓取 rdetails 和 cdetails。但是据我所知，从 cdetails 导航到课程或个人资料是不可能的。我只能从条款或抓取导航到标签栏。但由于grab 和terms 是在更高层次上声明的，它们可以在更深层次上访问。

希望能帮助到你。

更新 ：

由于我垂直导航到 Profile 组件，即使导航到没有方向 ='vertical' 的组件，如何在导航时垂直卸载 Profile 组件？

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

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

于 2016-10-26T15:47:21.143 回答