React Native报错Undefined is not object (evaluating 'navigation.navigate')求助

• 只有被React Navigation直接注册为路由页面的组件，才会默认被注入navigation属性，你的MenuHome是Home页面下的自定义子组件，无法自动获取该属性。
• 你在Home组件中引入MenuHome时，没有将Home页面拿到的navigation属性传递给MenuHome，导致MenuHome内部读取的navigation为undefined，调用navigate方法时触发报错。

有两种可行方案：

方案1：手动透传navigation属性 #

修改Home组件的代码，在调用MenuHome时传入navigation属性即可：

const Home = ({ navigation }) => {
  return (
    <View>
      <MenuHome navigation={navigation} />
    </View>
  )
}

方案2：使用useNavigation钩子获取（更推荐） #

如果你的React Navigation版本≥v5，可以直接在子组件中通过官方提供的useNavigation钩子获取导航对象，无需从父组件逐层传递属性，修改MenuHome代码如下：

// 首先引入钩子
import { useNavigation } from '@react-navigation/native';

const MenuHome = () => {
  // 直接获取navigation对象
  const navigation = useNavigation();
  return (
    <View style={styles.container}>
      <TouchableOpacity
          style={styles.box}
          onPress={() => navigation.navigate('CashBank')}
       >
       <View style={styles.inner}>
         <Text style={styles.titleText}>CASH BANK</Text>
       </View>
      </TouchableOpacity>
    </View>
  )
}

注意：操作完成后请确认CashBank组件已经在你的导航配置中完成注册，否则会触发找不到对应路由的报错。

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