如何设计 React-Native Android 应用的导航器结构？

Posted 2023-04-13

【中文标题】如何设计 React-Native Android 应用的导航器结构？

【英文标题】：How to design the navigator structure of a React-Native Android app?

【发布时间】：2016-06-24 18:07:28

【问题描述】：

我正在 android 上使用 React-Native 构建一个 Expense Keeping 应用程序。下面是我的应用的 UI 流程图：

我希望使用抽屉在***场景之间导航（显示为深红色）。

在 Settings 场景中，有一些选项需要导航到一组只能导航回 Settings 场景的 2 级场景（如图所示）蓝色）。

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

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

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

【参考方案1】：

我知道这是一个老问题，但它仍然是相关的，只是为了保持最新，使用React-Navigation（警告：需要一些学习和实践）。你可以使用这个example。请注意其中的导航树。它与问题需要的相似。

【讨论】：

谢谢！我目前也在使用 react-navigation，它很棒。 RN 的社区肯定行动迅速！

【参考方案2】：

你试过react-native-router-flux组件吗？

【参考方案3】：

您可以使用 Fragment。

首先：在活动中。您创建导航器。 在Activity的xml中有：

<DrawerLayout>

<Toolbar> or (Control Home of you)

<FrameLayout id="content_main">

然后：你创建 SettingFragment 扩展 Fragment

HomeFragment 扩展 Fragment

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();

【讨论】：

不幸的是，我相信这位用户询问的是 React Native，它使用 javascript 而不是 Java 创建移动应用程序。所以你的回答不会对他们有用。

这是 java 不是 react-native