React Native中TouchableOpacity onPress无法触发状态更新问题

核心问题1：状态切换逻辑错误 #

你的toggleNavigation函数当前固定将openNav设为false，无论当前状态如何，点击后状态不会发生改变，因此界面没有变化。

修复代码：

const toggleNavigation = () => {
  // 切换状态，取当前状态的反值
  setOpenNav(prev => !prev);
};

潜在问题2：嵌套可点击元素的事件冲突 #

外层TouchableOpacity嵌套ScreenHeaderBtn，如果ScreenHeaderBtn内部也包含可点击组件（比如另一个TouchableOpacity），会导致事件被内部组件拦截，外层点击事件无法触发。

优化方案：
直接将点击事件传递给ScreenHeaderBtn，去掉外层冗余的TouchableOpacity：

headerLeft: () => (
  <ScreenHeaderBtn 
    iconUrl={icons.menu} 
    dimension="60%" 
    onPress={toggleNavigation} 
  />
),

同时确保ScreenHeaderBtn组件内部正确接收并处理onPress属性，示例如下：

// ScreenHeaderBtn 组件示例
import { TouchableOpacity, Image } from 'react-native';

const ScreenHeaderBtn = ({ iconUrl, dimension, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Image 
        source={iconUrl} 
        style={{ width: dimension, height: dimension }} 
        resizeMode="contain"
      />
    </TouchableOpacity>
  );
};

export default ScreenHeaderBtn;

验证效果 #

修改完成后，点击header左侧按钮，openNav状态会在true/false间切换，界面上的文本会从Not working error !!!!!变为Nav is working，反之亦然。

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