React Native不同模块导航至同一表单屏幕的差异化提交逻辑实现

方案1：提交策略注入 #

别传模块名称，直接把提交逻辑作为参数传递给表单屏幕。导航时，模块1传入本地存储的处理函数，模块2传入接口请求的处理函数，表单屏幕只负责收集用户输入，提交时直接调用传入的逻辑即可。

举个React的例子：

// 模块1导航逻辑
navigate('/form', {
  state: {
    onSubmit: (formData) => localStorage.setItem('formData', JSON.stringify(formData))
  }
});

// 模块2导航逻辑
navigate('/form', {
  state: {
    onSubmit: async (formData) => await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(formData)
    })
  }
});

// 表单屏幕组件
function FormScreen() {
  const { state } = useLocation();
  const handleSubmit = (formData) => {
    state.onSubmit(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 表单输入项 */}
      <button type="submit">提交</button>
    </form>
  );
}

这种方式让表单屏幕彻底脱离业务逻辑，只做UI和数据收集，模块间也没有依赖，逻辑完全解耦。Vue等框架也可以通过路由state或组件props传递策略。

方案2：封装专属表单容器 #

把纯UI的基础表单抽成独立组件，然后给两个模块分别封装带提交逻辑的容器组件：

• 给模块1写Module1Form，内部引入基础表单，提交时执行本地存储逻辑
• 给模块2写Module2Form，内部同样引入基础表单，提交时执行接口请求逻辑

导航时模块1直接跳Module1Form路由，模块2跳Module2Form路由。每个模块的提交逻辑完全内聚在自己的容器里，基础表单只负责复用UI，没有任何条件判断，代码更清晰，也避免了模块间的依赖。

方案3：事件驱动模式 #

表单屏幕只负责收集数据，提交时发布一个"表单提交"事件；模块1和模块2在进入表单前，各自订阅这个事件并绑定自己的处理逻辑：

• 模块1进入时，订阅事件，收到数据后存本地
• 模块2进入时，订阅事件，收到数据后发请求
• 表单销毁时记得取消订阅，避免内存泄漏

这种方式也能实现完全解耦，表单不需要知道任何模块的存在，只负责触发事件，模块自行处理业务逻辑。

对比原方案的优势 #

原方案通过路由参数传模块名，会让表单屏幕充斥if/else逻辑，随着业务扩展会越来越臃肿，还会让表单和模块产生强依赖（模块名称变更时表单也要改）。上面的三个方案都把提交逻辑从表单中剥离，让每个模块的逻辑自己负责，表单只专注于UI和数据收集，符合单一职责原则，代码维护性更强。

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