React Native 导入组件后props.navigation导航功能失效问题

问题原因 #

只有被直接注册为导航栈路由的组件，才能默认获取到navigation属性。你将Menu作为普通公共组件导入到Supermenu中使用时，没有手动传递navigation属性，所以Menu内部打印props为空、导航失效。

解决方案 #

方案1：父组件手动传递navigation属性 #

如果Supermenu本身是注册在导航栈中的页面，本身可以拿到navigation属性，直接将该属性传递给Menu组件即可：

import React from "react";
import { View } from "react-native";
import Menu from "./menu";

const Supermenu = (props) =>{
    return(
        <View>
           <Menu navigation={props.navigation}></Menu> 
        </View>
    )
}

export default Supermenu

方案2：在Menu组件内使用useNavigation钩子获取导航实例（更推荐，无需逐层传参） #

直接在Menu组件中引入React Navigation提供的useNavigation钩子，不需要依赖父组件传递props：

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

const Menu = props =>{
  const navigation = useNavigation()
  return(
    <View style={styles.menuStyle}>
      <TouchableOpacity style={styles.topicDiv} onPress={() =>navigation.navigate("Ads")}>
        <View>
          <Image style={styles.topicStyle} source={require ("../assets/security-camera.png")}/>
          <Text style={styles.textStyle}>Câmeras</Text>
          <Text style={styles.subTextStyle}>Veja como está a praia ao vivo 📷</Text>
          {/* 剩余原有业务代码 */}
        </View>
      </TouchableOpacity>
    </View>
  )
}

如果你使用的是React Navigation 5之前的旧版本，不支持钩子调用，可以使用withNavigation高阶组件包裹Menu组件获取navigation属性。

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