React Native切换屏幕点击无效及React Navigation 6导航报错解决咨询

一、多次点击切换屏幕功能失效的解决思路 #

• 优化TouchableOpacity的点击事件绑定：用useCallback包裹导航函数，避免每次渲染创建新函数引发不必要重渲染，同时可添加防抖逻辑防止重复触发

  import { useCallback } from 'react';
  
  const handleNavigate = useCallback(() => {
    navigation.navigate('Filter');
  }, [navigation]);
  
  <TouchableOpacity onPress={handleNavigate}>
    {/* 组件内容 */}
  </TouchableOpacity>
  

• 检查导航栈跳转逻辑：避免重复推入相同路由，可先判断当前路由再执行跳转

  const handleNavigate = useCallback(() => {
    const currentRoute = navigation.getCurrentRoute();
    if (currentRoute?.name !== 'Filter') {
      navigation.navigate('Filter');
    }
  }, [navigation]);
  

• 排查组件状态问题：若组件依赖的状态更新导致导航功能异常，确认状态管理的依赖数组配置正确，避免不必要的组件重渲染

二、解决"undefined is not an object evaluating navigation.navigate"错误 #

针对你的CategoryContainer组件，可通过以下方式修复：

1. 使用useNavigation钩子（推荐方案） #

如果组件是导航屏幕的嵌套子组件，直接用React Navigation提供的钩子获取导航对象：

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

// 定义路由参数类型（可选，增强类型安全）
type RootStackParamList = {
  Filter: undefined; // 根据你的实际路由参数调整
};

const CategoryContainer = ({ setSelectedItem }: { setSelectedItem: Function }) => {
  const navigation = useNavigation<NavigationProp<RootStackParamList>>();

  return (
    <TouchableOpacity onPress={() => navigation.navigate('Filter')}>
      <Image
        style={Layout.icon}
        source={Images.ic_filter}
        resizeMode={'contain'}
      />
    </TouchableOpacity>
  );
};

2. 确保父组件正确传递navigation属性 #

若通过props传递navigation，需确认父组件是导航栈中的屏幕组件（能直接获取navigation），且传递时无遗漏：

// 父组件（导航栈内的屏幕组件）
const ParentScreen = ({ navigation }) => {
  return (
    <CategoryContainer 
      setSelectedItem={yourSetSelectedItemFunction} 
      navigation={navigation} 
    />
  );
};

3. 优化类型定义 #

避免使用navigation: any的模糊类型，改用具体的导航类型，既能规避类型错误，也能获得IDE智能提示：

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

type CategoryContainerProps = {
  setSelectedItem: Function;
  navigation: NavigationProp<RootStackParamList>;
};

const CategoryContainer = ({ setSelectedItem, navigation }: CategoryContainerProps) => {
  // 组件逻辑
};

内容的提问来源于stack exchange，提问作者Muhamad Rahmat Setiawan