如何設計React-Native Android應用程序的導航器結構？

Question

我正在Android上使用React-Native構建一個Expense Keeping應用程序。下面是我的應用程序的UI流程圖：

1. 我希望用抽屜頂層場景之間進行導航（暗紅色）。

2. 在設置場景，存在需要導航到一組的第二水平的場景只能導航回到設置場景（以藍色顯示）的選項。

我希望我的導航條跨場景轉換持續存在，所以我用了<Navigator>組件的navigationBar props。

使用單個<Navigator>作爲我應用程序中的頂級組件，並用它來管理所有場景和路線是一個明顯的解決方案，但這種方式很難管理場景的「層次」。

我想知道是否有其他更好的方法來構建<Navigator>在我的應用程序，也許嵌套導航？

Answer 1

我知道這是一個古老的問題，但它仍然是相關的，只是爲了保持這個最新的，使用React-Navigation（警告：需要一些學習和實踐）。你可以使用這個example。在那裏尋找導航樹。它與問題所需要的相似。

Answer 2

您可以使用Fragment。

第一：在活動中。你創建Navigatior。 在活動的XML有：

<DrawerLayout> 

<Toolbar> or (Control Home of you) 

<FrameLayout id="content_main"> 

然後：創建SettingFragment延長片段

HomeFragment延長片段

ExpansesFragment延長片段

import support.v4.Fragment 

在活動延長活動

onCre吃了：

FragmentManager manager = getSupportFragmentManager(); 
    manager.beginTransaction() 
      .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) 
      .replace(R.id.content_main, HomeFragment) 
      .commit(); 

在抽屜裏。事件Onclick

Home 

    FragmentManager manager = getSupportFragmentManager(); 
    manager.beginTransaction() 
      .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) 
      .replace(R.id.content_main, HomeFragment) 
      .commit(); 

Expenses 

FragmentManager manager = getSupportFragmentManager(); 
    manager.beginTransaction() 
      .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) 
      .replace(R.id.content_main, ExpensesFragment) 
      .commit(); 


Category 

    FragmentManager manager = getSupportFragmentManager(); 
    manager.beginTransaction() 
      .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN) 
      .replace(R.id.content_main, CategoryFragment) 
      .commit(); 

Answer 3

您試過react-native-router-flux組件嗎？