如何设计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组件吗？