react-native-gifted-charts PieChart的focusOnPress自定义onPress后失效求助

当你在PieChart的onPress回调里调用setIsPieChartSelected这类状态更新方法时，组件会触发重渲染，导致PieChart内部维护的焦点状态被重置——刚触发的焦点效果还没稳定，就因为重绘被清空，所以出现“闪烁”的现象。而换成console.log时，不会触发组件重绘，所以focusOnPress能正常工作。

解决这个问题可以从两个方向入手：

方案1：利用PieChart的选中状态控制图片显示 #

不要用独立的布尔状态变量，而是直接保存选中的饼图项，用它来控制图片的显示：

import { useState } from 'react';
import { PieChart } from 'react-native-gifted-charts';
import MyImage from './MyImage';

// 示例数据结构
const pieChartData = [
  { value: 30, color: '#FF6384' },
  { value: 50, color: '#36A2EB' },
  { value: 20, color: '#FFCE56' },
];

export default function MyChart() {
  const [selectedItem, setSelectedItem] = useState(null);

  return (
    <>
      <PieChart
        radius={100}
        focusOnPress
        data={pieChartData}
        extraRadiusForFocused={5}
        onPress={(item) => {
          // 切换选中状态：当前选中该item则取消，否则选中
          setSelectedItem(prev => prev?.value === item.value ? null : item);
        }}
      />
      {selectedItem && <MyImage />}
    </>
  );
}

方案2：使用PieChart的onFocus/onBlur回调 #

组件提供了onFocus和onBlur事件，专门用于监听焦点状态变化，用这两个回调来控制图片显示，不会和focusOnPress的内部逻辑冲突：

import { useState } from 'react';
import { PieChart } from 'react-native-gifted-charts';
import MyImage from './MyImage';

export default function MyChart() {
  const [isPieChartSelected, setIsPieChartSelected] = useState(false);

  return (
    <>
      <PieChart
        radius={100}
        focusOnPress
        data={pieChartData}
        extraRadiusForFocused={5}
        onFocus={() => setIsPieChartSelected(true)}
        onBlur={() => setIsPieChartSelected(false)}
      />
      {isPieChartSelected && <MyImage />}
    </>
  );
}

这两种方案都能避免因组件重绘导致的焦点状态重置问题，让focusOnPress和图片显示功能同时正常工作。

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