How to insert a scene and navigate with direction = 'vertical' in React Native Router Flux?

Question

I would like to insert action-native-router-flux <Scene/> and tried to do the following, but I cannot go to <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> 

I would like to insert the Profile component inside the Home component, because it can only be accessed through the Home component.

So, how can I insert the Profile component inside the Home component correctly?

When I also go to the Profile component, it moves in the vertical direction, but when it tries to move to another component (e.g. Actions.test() ) that does not have direction='vertical' from Profile > it moves horizontally when it should be vertical, while pressing the return button in the Profile component moves backward with the vertical direction.

Since I switched to the Profile component vertically , how can I get the Profile component that must be unmounted vertically when navigating, even if you go to the component without direction='vertical' ?

Answer 1

Here is how I do it in my application:

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

Thus, I can navigate to and from all the scenes nested in the tab / main. I can navigate from courses to register or, for example, a profile. I can also go to grab rdetails and cdetails terms. But switching from cdetails to courses or a profile is not possible, as I know. I can only go to the tab with terms or grab. But since captures and terms are declared at higher levels, they are available at deeper levels.

Hope this helps.

---

Update:

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

Not sure, but I think that when you move from a profile to another component, you do not see that the profile is turned off. if you want to unmount it vertically, you need to do Action.pop () for it to work. You can also use several actions as follows:

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