react-native-really-awesome-button onPress不随状态更新问题求助

这个问题本质是闭包陷阱——组件内部的onPress回调被捕获在初始状态的闭包中，没有随着状态更新同步获取最新值。虽然你查看源码没发现useMemo/useCallback的直接包裹，但组件内部的事件绑定逻辑可能没有正确处理回调的依赖更新。

以下是几个可行的解决方案：

1. 用useRef保存最新状态（推荐） #

通过useRef同步状态的最新值，在onPress回调里访问ref.current，避免闭包捕获旧值：

import { useState, useRef, useEffect } from 'react';
import AwesomeButton from 'react-native-really-awesome-button';

export default function YourComponent() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  // 同步状态到ref
  useEffect(() => {
    countRef.current = count;
  }, [count]);

  const handlePress = () => {
    // 读取最新状态
    const latestCount = countRef.current;
    console.log('当前计数：', latestCount);
    setCount(latestCount + 1);
  };

  return (
    <AwesomeButton onPress={handlePress}>
      点击 ({count})
    </AwesomeButton>
  );
}

2. 给按钮添加key强制重渲染 #

当状态变化时，通过修改key属性让组件重新挂载，确保回调绑定最新的状态：

<AwesomeButton 
  onPress={() => {
    console.log('当前计数：', count);
    setCount(count + 1);
  }}
  key={count}
>
  点击 ({count})
</AwesomeButton>

⚠️ 注意：这个方案会导致按钮每次状态变化都重新渲染，频繁更新状态时可能影响性能，仅推荐在状态更新不频繁的场景使用。

3. 用useCallback包裹回调并声明依赖 #

显式用useCallback包裹回调函数，把状态作为依赖项，确保每次状态变化时生成新的回调：

import { useState, useCallback } from 'react';
import AwesomeButton from 'react-native-really-awesome-button';

export default function YourComponent() {
  const [count, setCount] = useState(0);

  const handlePress = useCallback(() => {
    console.log('当前计数：', count);
    setCount(count + 1);
  }, [count]); // 把count作为依赖，确保回调更新

  return (
    <AwesomeButton onPress={handlePress}>
      点击 ({count})
    </AwesomeButton>
  );
}

为什么onPressIn/onPressOut能正常工作？ #

因为这两个事件是每次触发时都会直接读取当前状态，而onPress可能被组件内部的动画逻辑或事件处理机制缓存了初始的回调闭包，导致无法获取更新后的状态。

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