React Native组件同时使用Props和Navigation的报错解决

• 组件参数解构写法错误：组件接收的所有入参都存放在同一个顶层props对象上，写法{ navigation, props }相当于试图从顶层props中解构出一个名为props的子属性，但调用组件时只传了title属性，根本不存在这个嵌套的props字段，自然会报props.title为undefined的错误。
• 普通子组件不会自动注入navigation：只有被React Navigation直接注册为路由页面的组件（即写在<Stack.Screen>/<Tab.Screen>等配置项里的组件），才会自动收到导航传入的navigation prop。手动在业务页引入、渲染的Foobar组件属于普通嵌套子组件，不会自动拿到props上的navigation对象。

最通用、无需额外传参的方案是使用React Navigation提供的useNavigation Hook获取导航对象，自定义props可以正常读取/解构，不受影响：

• 先在组件文件顶部导入Hook：

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

• 修正后的组件代码：

const Foobar = (props) => {
  const navigation = useNavigation();
  return (
    <Container>
      <TitleBar onPress={() => navigation.navigate("Home")}>
        <Title>{props.title}</Title>
      </TitleBar>
    </Container>
  );
};
export default Foobar;

如果偏好解构写法，可以直接把自定义属性解出来，代码更简洁：

const Foobar = ({ title }) => {
  const navigation = useNavigation();
  return (
    <Container>
      <TitleBar onPress={() => navigation.navigate("Home")}>
        <Title>{title}</Title>
      </TitleBar>
    </Container>
  );
};
export default Foobar;

如果Foobar不是手动渲染的子组件，而是直接注册在导航栈中的页面，不需要使用Hook，直接把自定义属性和navigation并列解构即可，不要额外嵌套一层props：

// 仅适用于Foobar被直接注册为路由页面的场景
const Foobar = ({ navigation, title }) => (
  <Container>
    <TitleBar onPress={() => navigation.navigate("Home")}>
      <Title>{title}</Title>
    </TitleBar>
  </Container>
);
export default Foobar;

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