React Native自定义Button组件使用React Navigation报错及跳转无响应问题

问题原因 #

• 第一类navigation未定义报错原因：
  早期封装Button组件时未使用useNavigation钩子，且独立封装的公共组件不属于路由直接渲染的页面组件，React Navigation不会自动给非路由页面组件注入navigation属性，直接读取this.props.navigation就会抛出未定义错误。而直接在HomeScreen写按钮逻辑时，Home是路由注册的页面组件，默认可以拿到注入的navigation属性，所以可以正常运行。
• 第二类点击无响应原因：
  跳转目标的路由名称不匹配。你在App.js的栈导航中注册的页面名称是NewMedication，但Button组件的跳转逻辑里写的是"New Medication"，多了一个空格，路由匹配失败导致没有跳转动作。

修复步骤 #

1. 修正跳转路由名称：修改Button.js中的跳转逻辑，将导航参数改为和注册名完全一致的字符串：

// Button.js 中onPress逻辑调整为
onPress={() => {
  navigation.navigate("NewMedication");
}}

2. 补全Button组件导出：检查Button.js末尾是否添加导出语句，否则HomeScreen无法正常引入组件：

// Button.js 末尾添加
export default Button;

3. （可选）兼容性兜底：如果遇到useNavigation钩子无法正常获取属性的情况，可以改为从父组件传递navigation属性的方案，修改如下：

// HomeScreen中调用Button时传递属性
<Button navigation={navigation} />

// Button.js中接收属性使用
function Button({navigation}){
  // 去掉useNavigation相关代码，直接使用传入的navigation即可
}

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