React Native自定义Footer组件navigation.navigate调用报错如何解决

错误原因 #

只有被Stack.Screen直接注册为路由组件的页面（比如你的HomeScreen），才会自动被React Navigation注入navigation属性。你自己封装的FooterSB是在HomeScreen内部引入的自定义子组件，默认拿不到navigation属性，所以调用navigation.navigate的时候才会提示它是undefined。

修复方案（二选一即可） #

方案1：父组件透传navigation属性

直接在HomeScreen调用FooterSB的位置，把自身拿到的navigation当做属性传给子组件即可：
修改HomeScreen.js里的Footer渲染代码：

// 原来的代码
<FooterSB receiveValue={receiveValue}>
</FooterSB>

// 修改为
<FooterSB navigation={navigation} receiveValue={receiveValue} />

这个方案改动最小，适合新手快速解决问题。

方案2：使用useNavigation钩子主动获取导航实例

如果你很多页面都要复用Footer，每次透传navigation太麻烦，可以用React Navigation提供的内置钩子直接在Footer内部获取导航对象：
修改Footer.js的代码：

1. 首先导入useNavigation钩子：

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

2. 组件内部调用钩子拿到navigation，不需要再从props里接收：

// 原来的组件定义
const FooterSB = ({navigation}) => {

// 修改为
const FooterSB = ({receiveValue}) => {
  const navigation = useNavigation();

另外你Footer里现在导入的import {StackNavigation} from "./StackNavigation";没有任何作用，可以直接删掉。

两种方案任选一种即可解决导航失效的问题。

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