React Native Navigation(RNN)如何在React组件外跳转页面或获取componentId

解决方案 #

方案1：全局监听组件挂载事件维护当前激活的componentId #

这是最通用的实现方式，通过RNN官方提供的全局事件能力直接跟踪当前活跃页面的id：

• 首先在项目全局入口位置（比如index.js）声明变量存储激活页id，绑定全局监听事件

import { Navigation } from 'react-native-navigation';

// 全局存储当前激活页面的componentId
let currentActiveComponentId = null;

// 全局监听组件显示事件
Navigation.events().registerComponentDidAppearListener(({ componentId, componentType }) => {
  // 只处理普通页面组件，过滤弹窗、侧抽屉等非页面层级的组件
  if (componentType === 'Component') {
    currentActiveComponentId = componentId;
  }
});

• 原生事件触发跳转的逻辑里直接调用全局变量执行操作即可

// 原生事件触发跳转的逻辑
const onNativeEventTriggerNavigate = () => {
  if (currentActiveComponentId) {
    Navigation.push(currentActiveComponentId, {
      component: {
        name: 'YourTargetScreenName',
        passProps: {
          // 传递需要的自定义参数
        }
      }
    });
  }
};

方案2：指定明确的栈ID执行跳转 #

如果你预先定义了导航栈的id，也可以直接通过栈ID执行push操作，不需要依赖当前页面的componentId：

// 初始化导航根节点时指定栈id
Navigation.setRoot({
  root: {
    stack: {
      id: 'MainAppStack', // 预先定义好业务栈的id
      children: [
        {
          component: {
            name: 'HomeScreen'
          }
        }
      ]
    }
  }
});

// 跳转时直接用预设的栈id即可
Navigation.push('MainAppStack', {
  component: {
    name: 'YourTargetScreenName'
  }
});

注意事项 #

• 如果是多栈场景（比如Tab导航下每个Tab对应独立导航栈），可以额外维护当前激活的栈ID，跳转时根据业务需求选择对应栈执行操作
• 可以配合registerComponentDidDisappearListener事件同步更新存储的id，避免使用已经销毁的页面的componentId

内容的提问来源于stack exchange，提问作者mohsinulhaq