Jak zagnieździć scenę i nawigację za pomocą direction = 'vertical' w trybie React Native Router Flux?

Question

Chciałbym gniazdo reagować-native Router-flux na <Scene/> i próbował następujące, ale nie jestem w stanie poruszać się do <Scene component={Home}/> z <Scene component={Profile}/>:

<Scene 
    component={Home} 
    initial={true} 
    key='home' 
    title='Home' 
    type='reset' 
> 
    <Scene 
     component={Profile} 
     direction='vertical' 
     key='sell' 
     title='Sell' 
    /> 
</Scene> 

Chciałbym gniazdo Profile składnik wewnątrz Home komponent , ponieważ dostęp do niego można uzyskać tylko za pośrednictwem komponentu Home.

Jak właściwie mogę zagnieździć komponent Profile wewnątrz komponentu Home?

Kiedy również przejść do Profile składnika, to przechodzi w kierunku vertical, ale gdy próbuje przejść do innego składnika (np Actions.test()), które nie mają direction='vertical' zestaw z Profile składnika, to przechodzi poziomo, gdy to powinien być w pionie, natomiast naciśnięcie przycisku wstecz w obrębie składnika Profile powoduje powrót do kierunku o wartości vertical.

Odkąd nawigować do Profile komponentu vertically, jak mogę dostać składnik Profile być nieoprawione vertically podczas nawigacji, nawet podczas nawigacji do komponentu bez direction='vertical'?

Answer 1

ten sposób robię to działa w moim app:

<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>

ten sposób mogę przejść do i ze wszystkich scen zagnieżdżonych w im zakładkami/main mogę poruszać się z kursów zarejestrować lub na przykład profil. Mogę również poruszać się po terminach chwytających szczegóły i listy kontrolne. Ale nawigacja z mapowań na kursy lub profil nie jest możliwa, ponieważ wiem. Mogę tylko nawigować do tabbar z warunków lub grab. Ale ponieważ chwyt i warunki są zadeklarowane na wyższych poziomach, są one dostępne na głębszych poziomach.

Mam nadzieję, że to pomaga.

---

Aktualizacja:

Odkąd nawigować do profilu elementu w pionie, jak mogę dostać składnik Profil być nieoprawione pionowo podczas nawigacji, nawet podczas nawigowania do komponentu bez kierunku = "vertical "?

Nie jestem pewien, ale myślę, że po przejściu z profilu do innego komponentu nie można zobaczyć odmontowania profilu. jeśli chcesz odmontować go w pionie, musisz wykonać Action.pop() w ten sposób powinien zadziałać. Można także użyć kilku czynności razem tak:

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