React Navigation如何复用同一组件配置多个Stack.Screen路由

1. 保留初始路由配置 #

你最开始的路由配置本身是合理的，无需复制组件，直接保留两个路由指向同一个Complain组件即可：

<Stack.Screen name="Complain" component={Complain} />
<Stack.Screen name="ComplainList" component={ComplainList} />
<Stack.Screen name="ComplainUpdate" component={Complain} />

预期的路由堆叠效果如下：

2. 组件内区分业务场景 #

在Complain组件内部通过路由名称或入参判断当前是新增还是编辑模式，分别处理对应的逻辑即可，示例代码如下：

import { useRoute, useNavigation } from '@react-navigation/native';
import { useEffect } from 'react';

const Complain = () => {
  const route = useRoute();
  const navigation = useNavigation();
  // 方式1：通过路由名直接判断模式
  const isEdit = route.name === 'ComplainUpdate';
  // 方式2：通过跳转传入的参数判断（编辑场景带入待修改的记录ID）
  const targetId = route.params?.id;

  useEffect(() => {
    if (isEdit && targetId) {
      // 编辑模式：先拉取对应投诉记录的详情回显
      fetchComplainDetail(targetId);
    }
  }, [isEdit, targetId]);

  const handleSubmit = () => {
    if (isEdit) {
      // 走编辑更新接口
      updateComplain(targetId, formData);
    } else {
      // 走新增提交接口
      addComplain(formData);
    }
    // 提交成功后返回列表页
    navigation.navigate('ComplainList');
  }

  // 其余页面渲染逻辑通用，无需区分模式
}

3. 可选优化：动态配置导航栏标题 #

可以直接在路由配置中给两个路由分别设置不同的标题，无需在组件内额外处理：

<Stack.Screen 
  name="Complain" 
  component={Complain}
  options={{ title: '提交投诉' }}
/>
<Stack.Screen name="ComplainList" component={ComplainList} />
<Stack.Screen 
  name="ComplainUpdate" 
  component={Complain}
  options={{ title: '修改投诉' }}
/>

这种方案完全没有代码冗余，修改Complain组件的公共逻辑时两个场景会同步生效，可维护性远高于复制组件的临时方案。

内容的提问来源于stack exchange，提问作者가부리