React Native导航传setIsPressed报错：setIsPressed不是函数的解决办法

一、先修复当前参数获取问题 #

报错的核心原因是目标页面未正确从导航参数中取出setIsPressed函数，直接调用未定义的变量自然会提示“不是函数”。

步骤1：目标页面正确获取导航参数 #

在目标页面（Map页面）中，需通过route对象的params属性拿到传递的函数，同时做空值判断避免潜在报错：

// 目标页面(Map)代码
import { useNavigation, useRoute } from '@react-navigation/native';

const MapScreen = () => {
  const navigation = useNavigation();
  const route = useRoute();
  // 从导航参数中取出函数，添加可选链防止参数不存在时崩溃
  const setIsPressed = route.params?.setIsPressed;

  const handlePress = () => {
    navigation.navigate('DM');
    // 先确认函数存在再调用
    if (typeof setIsPressed === 'function') {
      setIsPressed(true);
    }
  };

  return (
    // 示例按钮组件
    <Button title="跳转并更新状态" onPress={handlePress} />
  );
};

步骤2：确认源页面参数传递写法正确 #

源页面跳转代码需确保语法正确（你原代码中onPress{()是笔误，应为onPress={() =>）：

// 源页面跳转代码
onPress={() => navigation.navigate('Map', { setIsPressed })}

二、更稳妥的替代方案（不推荐直接传状态更新函数） #

直接传递组件的状态更新函数并非最佳实践，容易引发内存泄漏、导航栈变化导致参数失效等问题。推荐以下两种更可靠的方案：

方案1：目标页面返回时传递数据，源页面监听更新 #

目标页面不传递函数，而是在跳转/返回时携带状态更新指令，源页面通过监听导航焦点事件更新状态：

// 目标页面(Map)代码
const handlePress = () => {
  // 跳转时给后续页面或源页面传递标记
  navigation.navigate('DM', { shouldUpdateIsPressed: true });
  // 如果是直接返回源页面，用以下写法：
  // navigation.setParams({ shouldUpdateIsPressed: true });
  // navigation.goBack();
};

// 源页面代码
import { useFocusEffect } from '@react-navigation/native';

const SourceScreen = () => {
  const [isPressed, setIsPressed] = useState(false);
  const navigation = useNavigation();
  const route = useRoute();

  useFocusEffect(
    React.useCallback(() => {
      // 每次回到源页面时检查参数
      const shouldUpdate = route.params?.shouldUpdateIsPressed;
      if (shouldUpdate) {
        setIsPressed(true);
        // 清除参数避免重复触发
        navigation.setParams({ shouldUpdateIsPressed: undefined });
      }
    }, [navigation, route.params])
  );

  return (
    // 你的页面组件
  );
};

方案2：使用全局状态管理 #

如果多个页面需要共享该状态，推荐用Context或轻量状态管理库（如Zustand、Jotai）统一管理：

用Context实现示例：

// 创建Context文件（如IsPressedContext.js）
import React, { createContext, useState, useContext } from 'react';

const IsPressedContext = createContext();

export const IsPressedProvider = ({ children }) => {
  const [isPressed, setIsPressed] = useState(false);

  return (
    <IsPressedContext.Provider value={{ isPressed, setIsPressed }}>
      {children}
    </IsPressedContext.Provider>
  );
};

export const useIsPressed = () => useContext(IsPressedContext);

在根组件包裹Provider：

// App.js或导航根组件
import { IsPressedProvider } from './IsPressedContext';

export default function App() {
  return (
    <IsPressedProvider>
      {/* 你的导航组件 */}
    </IsPressedProvider>
  );
}

任意页面直接调用：

// 源页面或目标页面
const { isPressed, setIsPressed } = useIsPressed();

// 目标页面按钮点击逻辑
const handlePress = () => {
  navigation.navigate('DM');
  setIsPressed(true);
};

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