React Navigation中屏幕间参数传递有哪些常见陷阱又该如何解决

在React Native项目里，React Navigation是最主流的路由方案。屏幕之间传递参数是日常开发的高频操作，但不少人在实际使用中会掉进一些隐蔽的坑，导致页面白屏、数据不刷新或逻辑错乱。下面梳理常见陷阱与对应解决办法。

陷阱一：直接读取可能不存在的参数

新手常误以为跳转时传的参数一定存在，在组件里直接写 props.route.params.id，一旦来源页漏传就会抛出 Cannot read property of undefined。正确做法是用默认值或可选链。

// 错误示例
function DetailScreen({ route }) {
  const id = route.params.id; // 若未传 params 会崩溃
  return <Text>{id}</Text>;
}

// 正确示例
function DetailScreen({ route }) {
  const id = route.params?.id ?? 'default';
  return <Text>{id}</Text>;
}

陷阱二：用 navigate 重复跳转导致参数不更新

当已经在目标页，再次调用 navigation.navigate('List', { refresh: true }) 时，如果路由相同，React Navigation 默认不会重新挂载组件，导致页面未感知新参数。可以使用 navigation.setParams 或监听 route 变化。

// 使用 setParams 更新当前页参数
function ListScreen({ navigation, route }) {
  useEffect(() => {
    // 每次依赖 route.params 变化执行
    if (route.params?.refresh) {
      console.log('需要刷新');
    }
  }, [route.params]);

  return (
    <Button
      title="更新参数"
      onPress={() => navigation.setParams({ refresh: true })}
    />
  );
}

陷阱三：嵌套导航器中父导航器拿不到子页参数

在底部 Tab 内嵌 Stack 的结构中，若子 Stack 页面传参，外层 Tab 的 navigation 无法直接获取。应通过回调、全局状态或事件总线把参数向上传递。

用事件向上传递参数的示例

// 子页面
function ChildScreen({ navigation }) {
  return (
    <Button
      title="传参给父"
      onPress={() => navigation.getParent()?.navigate('Home', { fromChild: 1 })}
    />
  );
}

// 父页面监听
function HomeScreen({ route }) {
  useEffect(() => {
    if (route.params?.fromChild) {
      console.log('收到子页参数', route.params.fromChild);
    }
  }, [route.params]);
  return <Text>Home</Text>;
}

总结建议

避免 React Navigation 参数传递陷阱的核心，是理解 route 与 navigation 的职责边界，对所有 params 做防御性读取，并区分 navigate 与 push、setParams 的适用时机。在嵌套结构中，优先用统一状态层降低耦合。

React_Navigation屏幕参数传递navigation修改时间：2026-07-30 14:36:30