在map函数中使用navigation.navigate()导航失效，报错navigation未定义求助

报错undefined is not an object (evaluating 'navigation.navigate')的核心原因是当前组件中navigation对象未被正确获取，以下是具体原因和解决办法：

可能的原因及对应解法 #

1. 组件调用时未传递navigation属性 #

你的PopupMenuAction组件声明了解构{navigation}，但如果在父组件中调用它时没有传递该属性，就会导致navigation为undefined。

解决：
在调用PopupMenuAction的父组件（必须是导航栈中的屏幕组件）中，显式传递navigation：

// 示例：在某个导航栈屏幕组件中调用
function YourScreen({ navigation }) {
  return (
    <View>
      <PopupMenuAction navigation={navigation} />
    </View>
  );
}

2. 组件不在导航上下文范围内 #

如果PopupMenuAction不是直接作为导航栈的屏幕组件，且无法通过props传递navigation，可以使用React Navigation提供的useNavigation钩子直接获取导航对象。

解决：
修改PopupMenuAction组件，改用钩子获取navigation：

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

function PopupMenuAction () {
  const navigation = useNavigation(); // 获取导航对象
  return (
    <>
      {/* 原有代码保留，map中的 onPress 逻辑不变 */}
      {actions.map((op, i) => (
        <TouchableOpacity 
          style={[
            style.option,
            { borderBottomWidth: i === actions.length - 1 ? 0 : 1 }
          ]}
          key={i}
          onPress={() => navigation.navigate('CreateReaction')}
        >
          <Text style={{ fontFamily: "Title-Font", fontSize: 15 }}>{op.title}</Text>
        </TouchableOpacity>
      ))}
      {/* 其他原有代码 */}
    </>
  )
}

额外检查点 #

• 确认'CreateReaction'是导航栈中已注册的屏幕名称，拼写和大小写要完全一致。
• 确保actions数组已正确定义且不为空，避免map渲染空内容引发的间接问题。

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