Làm thế nào để lồng cảnh và điều hướng với hướng = 'dọc' trong React Native Router Flux?

Question

Tôi muốn tổ phản ứng bản địa-router-flux của <Scene/> và cố gắng điều sau đây, nhưng tôi không thể để điều hướng đến <Scene component={Home}/> từ <Scene component={Profile}/>:

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

Tôi muốn tổ Profile thành phần bên trong Home thành phần , bởi vì nó chỉ có thể được truy cập thông qua thành phần Home.

Vậy làm cách nào tôi có thể làm tổ hợp thành phần Profile bên trong thành phần Home?

Khi tôi còn hướng đến Profile thành phần, nó điều hướng với hướng vertical, nhưng khi nó cố gắng để di chuyển đến một thành phần (ví dụ Actions.test()), mà không có direction='vertical' bộ, từ Profile thành phần, nó điều hướng ngang khi nó phải theo chiều dọc, trong khi nhấn nút quay lại trong thành phần Profile điều hướng trở lại theo hướng vertical.

Kể từ khi tôi chuyển đến Profile phần vertically, làm thế nào tôi có thể nhận được phần Profile được lắp ráp vertically khi điều hướng, ngay cả khi điều hướng đến một thành phần mà không direction='vertical'?

Answer 1

Đây là cách tôi làm cho nó hoạt động trong ứng dụng của tôi:

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

Bằng cách này tôi có thể di chuyển đến và đi từ tất cả các cảnh lồng trong thanh tabbar/main tôi có thể di chuyển từ các khóa học để đăng ký hoặc cho hồ sơ ví dụ. tôi cũng có thể điều hướng đến các thuật ngữ lấy rdetails và cdetails. Nhưng không thể điều hướng từ cdetails đến các khóa học hoặc hồ sơ như tôi biết. tôi chỉ có thể điều hướng đến tabbar từ các thuật ngữ hoặc lấy. Nhưng kể từ khi lấy và các điều khoản được khai báo ở cấp độ cao hơn, họ có thể truy cập ở các cấp độ sâu hơn.

Hy vọng điều đó sẽ hữu ích.

---

Cập nhật:

Kể từ khi tôi chuyển đến hồ sơ thành phần theo chiều dọc, làm thế nào tôi có thể nhận các thành phần hồ sơ để được lắp ráp theo chiều dọc khi điều hướng, thậm chí khi điều hướng đến một thành phần mà không hướng = 'thẳng đứng '?

Không chắc chắn nhưng tôi nghĩ khi bạn điều hướng từ tiểu sử đến thành phần khác, bạn không thể xem hồ sơ đang ngắt kết nối. nếu bạn muốn unmount nó theo chiều dọc, bạn cần phải làm Action.pop() theo cách đó nên làm việc. Bạn cũng có thể sử dụng vài hành động cùng nhau như thế này:

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