React native 如何计算屏幕上色区域的百分比？

在我的项目中有一个屏幕，你可以在屏幕上画画；屏幕的目标-及时画满屏幕。要让油漆部分工作起来相当困难。但现在更难了——我不知道如何计算屏幕上绘制面积的百分比，并在屏幕上显示结果，同时在屏幕上绘制时改变它

我相信这样做的正确方法——初始化“var”，并以某种方式使其取决于绘制的区域。。。但是我仍然没有找到正确的方法来做这样的smth

我的项目由两部分组成-绝对部分和块部分。我会附上这两个部分的部分，所以你们可以看到绘画部分是如何完成的，所以计算部分（未完成）。 绝对部分为（不包括css）

类型PropsType={
BlockScont：数字；
所选索引：数组；
SetSelectedIndex：（newSelectedIndex:Array）=>void；
};
常量绝对部分：React.FC=（道具）=>{
常量[计数器，设置计数器]=使用状态（60）；
const navigation=useNavigation（）；
常数百分比=Math.round(
（props.SelectedIndex.length/props.blocksCount）*100，
);
计数器>0&&setTimeout（（）=>setCounter（计数器-1），1000）；
常量导航=（isFail？：布尔）=>{
navigation.navigate（'TestResultScreen'{
标题：“Маач”，
isSuccess:isFail，
});
道具设置选择指数（[]）；
设置计数器（60）；
};
useffect（（）=>{
柜台{
如果（props.selectedIndex.length>=props.blocksCount）{
导航（）；
}
}，[props.selectedIndex]）；
返回(
{props.selectedIndex.length void；
};
常量块项：React.FC=（道具）=>{
返回(
);
};

及

类型PropsType={
选择：布尔；
onPress:（）=>无效；
};
常量块项：React.FC=（道具）=>{
返回(
);
};

我希望一切顺利，我将非常感谢您的帮助，因为我已经花了相当长的时间试图解决这件事，而且还没有变得更容易。）

  type PropsType = {
  blocksCount: number;

  selectedIndexes: Array<number>;
  setSelectedIndexes: (newSelectedIndexes: Array<number>) => void;
};
const AbsoluteSection: React.FC<PropsType> = (props) => {
  const [counter, setCounter] = useState(60);
  const navigation = useNavigation();
  const percent = Math.round(
    (props.selectedIndexes.length / props.blocksCount) * 100,
  );

  counter > 0 && setTimeout(() => setCounter(counter - 1), 1000);

  const navigate = (isFail?: boolean) => {
    navigation.navigate('TestResultScreen', {
      title: 'Мультитач',
      isSuccess: isFail,
    });
    props.setSelectedIndexes([]);
    setCounter(60);
  };

  useEffect(() => {
    counter <= 0 && navigate(true);
  }, [counter]);

  useEffect(() => {
    if (props.selectedIndexes.length >= props.blocksCount) {
      navigate();
    }
  }, [props.selectedIndexes]);

  return (
    <View style={styles.absolute_wrap} pointerEvents={'none'}>
      <Text size={24} color={'#AAAAAA'} isCenterAlign>
        {props.selectedIndexes.length <= 0 &&
          'Починай замальовувати пальцем екран'}
      </Text>

      <View style={styles.pie_wrap}>
        <Pie
          radius={80}
          innerRadius={75}
          sections={[
            {
              percentage: percent,
              color: '#FFC107',
            },
          ]}
          backgroundColor="#ddd"
        />
        <View style={styles.gauge}>
          <Text style={styles.gaugeText} size={28}>
            {percent}%
          </Text>
        </View>
      </View>
      <Text size={28}>{counter} сек</Text>
    </View>
  );
}; 

type PropsType = {
  isSelected: boolean;
  onPress: () => void;
};
const BlockItem: React.FC<PropsType> = (props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={[
        styles.block,
        {
          height: '8%',
          width: '16.6%',
          backgroundColor: props.isSelected ? '#F6CE0E' : 'white',
        },
        ,
      ]}
    />
  );
};

type PropsType = {
  isSelected: boolean;
  onPress: () => void;
};
const BlockItem: React.FC<PropsType> = (props) => {
  return (
    <TouchableOpacity
      onPress={props.onPress}
      style={[
        styles.block,
        {
          height: '8%',
          width: '16.6%',
          backgroundColor: props.isSelected ? '#F6CE0E' : 'white',
        },
        ,
      ]}
    />
  );
};