React-Native Android app的navigator结构如何设计？

Question

我正在 Android 上使用 React-Native 构建一个费用管理应用程序。下面是我的应用程序的 UI 流程图：

我希望使用抽屉在顶级场景之间导航（以深红色显示）。
在设置场景中，有选项需要导航到一组二级场景，只能导航回设置场景（以蓝色显示）。

我希望我的导航栏在场景转换中保持不变，所以我使用 <Navigator> 组件的 navigationBar props。

在我的应用程序中使用单个 <Navigator> 作为顶级组件并使用它管理所有场景和路线是一个明显的解决方案，但这种方式很难管理 "levels" 个场景。

我想知道是否还有其他更好的方法来构建我的应用程序中的 <Navigator>，也许是嵌套导航器？

Answer 1

您可以使用 Fragment。

首先：在Activity。您创建 Navigator。在 Activity 的 xml 中有：

<DrawerLayout>

<Toolbar> or (Control Home of you)

<FrameLayout id="content_main">

然后：您创建 SettingFragment 扩展 Fragment

HomeFragment 扩展片段

ExpansesFragment 扩展片段

import support.v4.Fragment

在Activity中扩展Activity

创建时：

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

在抽屉里。事件点击

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 2

您是否尝试过 react-native-router-flux 组件？

Answer 3

我知道这是一个老问题，但它仍然相关，只是为了保持最新，请使用 React-Navigation (Warning: requires some learning and practice). You can use this example。留意其中的导航树。和题目需要的差不多。

React-Native Android app的navigator结构如何设计？

How to design the navigator structure of a React-Native Android app?

navigation

android

reactjs

react-native