Wix React Native Navigation 7.32.1 根布局配置详解-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00187/article/details/148392427

Wix React Native Navigation 7.32.1 根布局配置详解

react-native-navigation A complete native navigation solution for React Native 项目地址: https://gitcode.com/gh_mirrors/re/react-native-navigation

什么是根布局(Root)

在 Wix React Native Navigation (RNN) 中，根布局是整个应用界面结构的起点和基础框架。它定义了用户首次与应用交互时看到的界面组织形式。根布局不是固定不变的，开发者可以根据应用状态的变化动态调整根布局结构。

根布局的核心概念

根布局相当于应用的"骨架"，决定了应用界面的基本组织形式。常见的根布局类型包括：

堆栈式布局(Stack)：适合线性流程的场景，如登录流程
底部标签栏布局(BottomTabs)：适合多模块切换的应用
侧边菜单布局(SideMenu)：适合需要侧滑菜单的应用

应用启动时的根布局设置

RNN 提供了 registerAppLaunchedListener 方法来监听应用启动事件，这是设置初始根布局的最佳时机：

Navigation.events().registerAppLaunchedListener(() => {
  Navigation.setRoot({
    root: {
      // 根布局配置
    }
  });
});

平台差异说明：

iOS：通常只在应用首次启动时触发一次
Android：除了首次启动，当应用从后台恢复且Activity被系统销毁重建时也会触发

重要提示：必须在JS包执行后立即调用registerAppLaunchedListener，否则可能错过原生端发送的事件。

条件式初始根布局

实际开发中，我们经常需要根据应用状态决定初始根布局。最常见的场景是根据用户登录状态显示不同界面：

Navigation.events().registerAppLaunchedListener(() => {
  if (isUserLoggedIn()) {
    setMainRoot();  // 已登录：显示主界面
  } else {
    setLoginRoot(); // 未登录：显示登录界面
  }
});

常见根布局结构详解

1. 堆栈式布局(Stack)

堆栈布局适合线性流程的应用场景，如登录流程、向导流程等。特点是界面以堆栈形式组织，新界面会压入栈顶，返回时从栈顶弹出。

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'LOGIN_SCREEN' // 初始界面
          }
        }
      ]
    }
  }
});

适用场景：

简单的单流程应用
应用中的独立流程模块（如登录、注册流程）
需要明确前进/后退导航的场景

2. 底部标签栏布局(BottomTabs)

底部标签栏是多模块应用的常见组织形式，每个标签通常对应一个独立的导航堆栈。

Navigation.setRoot({
  root: {
    bottomTabs: {
      children: [
        {
          stack: {
            children: [
              {
                component: {
                  name: 'FEED_SCREEN' // 第一个标签的初始界面
                }
              }
            ]
          }
        },
        {
          stack: {
            children: [
              {
                component: {
                  name: 'CHAT_LIST' // 第二个标签的初始界面
                }
              }
            ]
          }
        }
        // 可以继续添加更多标签
      ]
    }
  }
});

最佳实践：

每个标签应使用独立的堆栈，保证导航隔离
标签数量建议控制在3-5个，过多会影响用户体验
考虑为每个标签设置适当的图标和文字说明

3. 侧边菜单布局(SideMenu)

侧边菜单布局适合需要从侧边滑出菜单的应用，中心区域通常也是一个堆栈布局。

Navigation.setRoot({
  root: {
    sideMenu: {
      center: {
        stack: {
          children: [
            {
              component: {
                name: 'HOME_SCREEN' // 中心区域初始界面
              }
            }
          ]
        }
      },
      left: {
        component: {
          name: 'MENU_SCREEN' // 左侧菜单界面
        }
      }
      // 也可以配置右侧菜单(right)
    }
  }
});

使用技巧：