如何在MobX Store中使用React Navigation实现页面导航？

阿华AIGC实验室

2026-5-22

在MobX Store中实现导航的合理方案

我完全懂你的纠结——在屏幕组件里用this.props.navigation做导航顺手得很，但放到MobX Store里就卡壳，而且不想用全局存navigation引用这种不太优雅的方案，太能理解了！先给你拆解问题，再给几个靠谱的实现思路：

先聊核心问题：Store里该不该执行导航逻辑？

其实没有绝对的对错，但更推荐的原则是：让Store专注于状态管理和业务逻辑，导航这种UI层面的操作，尽量和UI层保持关联。当然不是说完全不能在Store里触发导航，而是要通过更优雅的方式，避免直接把导航实例硬塞进Store里。

方案1：基于导航容器Ref封装导航服务

你提到的《Navigating without the navigation prop》其实不止适用于屏幕组件，我们可以基于这个思路封装一个干净的导航服务，不用直接存navigation引用：

首先在项目根文件（比如App.js）里创建导航容器的Ref：

import { NavigationContainer } from '@react-navigation/native';
import React from 'react';

export const navigationRef = React.createRef();

function App() {
  return (
    <NavigationContainer ref={navigationRef}>
      {/* 你的导航栈/标签栏结构 */}
    </NavigationContainer>
  );
}

封装一个导航工具函数（比如新建navigationService.js）：

import { navigationRef } from './App';

export function navigate(screenName, params) {
  if (navigationRef.current) {
    navigationRef.current.navigate(screenName, params);
  }
}

// 还可以封装其他常用导航方法
export function goBack() {
  if (navigationRef.current) {
    navigationRef.current.goBack();
  }
}

export function push(screenName, params) {
  if (navigationRef.current) {
    navigationRef.current.push(screenName, params);
  }
}

现在在MobX Store里直接导入这个工具函数就能触发导航了：

import { navigate } from '../navigationService';
import { makeAutoObservable } from 'mobx';

class UserStore {
  constructor() {
    makeAutoObservable(this);
  }

  login = async (username, password) => {
    // 处理登录业务逻辑
    const userInfo = await api.login(username, password);
    this.setUser(userInfo);
    // 登录成功后导航到首页
    navigate('HomeScreen', { user: userInfo });
  };
}

export const userStore = new UserStore();

这种方式符合React Navigation的官方设计思路，比全局存navigation引用更可控，也不会造成不必要的耦合。

方案2：通过回调让UI层处理导航

如果想让Store完全和导航库解耦，这种方式更合适：Store只负责处理业务逻辑，然后通过回调通知UI组件执行导航。

在MobX Store里定义一个回调属性：

import { makeAutoObservable } from 'mobx';

class OrderStore {
  onOrderSuccess = null;

  constructor() {
    makeAutoObservable(this);
  }

  submitOrder = async (orderData) => {
    // 处理提交订单的业务逻辑
    const orderId = await api.submitOrder(orderData);
    this.setCurrentOrderId(orderId);
    // 通知UI层导航
    if (this.onOrderSuccess) {
      this.onOrderSuccess('OrderDetailScreen', { orderId });
    }
  };
}

export const orderStore = new OrderStore();

在对应的屏幕组件里，把导航方法传给Store：

import { observer } from 'mobx-react-lite';
import { orderStore } from '../stores/OrderStore';
import { Button } from 'react-native';

const OrderSubmitScreen = observer(({ navigation }) => {
  React.useEffect(() => {
    // 组件挂载时传入导航回调
    orderStore.onOrderSuccess = (screenName, params) => {
      navigation.navigate(screenName, params);
    };
    // 组件卸载时清空回调，避免内存泄漏
    return () => {
      orderStore.onOrderSuccess = null;
    };
  }, [navigation]);

  return (
    <Button 
      onPress={() => orderStore.submitOrder({ goods: ['item1'] })} 
      title="提交订单" 
    />
  );
});

这种方式让Store完全不依赖任何导航库，耦合度极低，适合对架构解耦要求高的场景。

方案3：用MobX事件总线解耦（适合大型项目）

如果你的项目里多个Store都需要触发导航，可以用MobX的响应式特性实现一个简单的事件总线：

创建一个专门的导航事件Store：

import { makeAutoObservable } from 'mobx';

class NavigationEventStore {
  navigationEvent = null;

  constructor() {
    makeAutoObservable(this);
  }

  triggerNavigation = (screenName, params) => {
    this.navigationEvent = { screenName, params };
  };

  clearEvent = () => {
    this.navigationEvent = null;
  };
}

export const navigationEventStore = new NavigationEventStore();

在导航容器所在的组件里监听事件：

import { observer } from 'mobx-react-lite';
import { navigationEventStore } from '../stores/NavigationEventStore';

const NavigationListener = observer(({ navigation }) => {
  React.useEffect(() => {
    if (navigationEventStore.navigationEvent) {
      const { screenName, params } = navigationEventStore.navigationEvent;
      navigation.navigate(screenName, params);
      navigationEventStore.clearEvent();
    }
  }, [navigation, navigationEventStore.navigationEvent]);

  return null; // 这个组件只负责监听事件，不需要渲染UI
});

记得把这个NavigationListener组件放到导航容器内部哦。

最后在任意MobX Store里触发导航事件：

import { navigationEventStore } from './NavigationEventStore';

class CartStore {
  checkout = async () => {
    // 处理结算逻辑
    await api.checkout();
    // 触发导航到订单列表
    navigationEventStore.triggerNavigation('OrderListScreen');
  };
}