React Native 如何将按钮/图像放入圆形进度条内 (react-native-circular-progress-indicator)

Question

现在，我正在使用 CountdownCircleTimer 作为我的“进度条”，但需要一个向上计数而不是向下计数的。

它看起来像这样，中间有一个可触摸的图像按钮，可以开始录制。

<CountdownCircleTimer
  isPlaying={progressCircle}
  size={74}
  strokeWidth={5}
  duration={60}
  colors={[["#000000", .001], [feedScreen ? "#F777B1" : "#64A6EC", .999]]}
  trailColor={"transparent"}
>
    <TouchableOpacity
      style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
          width: 62,
          height: 62,
          backgroundColor: "#000000",
      })}
      onPress={(e) => onPress(e)}
    >
        {children}
    </TouchableOpacity>
</CountdownCircleTimer>

我正在尝试实现 CircularProgress 组件，但它隐藏了图像/按钮。顶部是上图中旧的倒数计时器，底部是新的圆形进度条，隐藏了图像/按钮。

<CircularProgress
  value={duration}
  delay={progressCircle}
  radius={37}
  activeStrokeWidth={5}
  activeStrokeColor={feedScreen ? "#F777B1" : "#64A6EC"}
  textColor={'transparent'}
>
    <TouchableOpacity
      style={tw.style(`rounded-full overflow-hidden justify-center items-center`, {
          width: 62,
          height: 62,
          backgroundColor: "#000000",
      })}
      onPress={(e) => onPress(e)}
    >
        {children}
    </TouchableOpacity>
</CircularProgress>

我如何将图像和按钮放在中间，就像我对倒计时通告所做的那样？

Answer 1

您将不得不使用某种形式的绝对定位。

在您的循环进度条样式中添加类似这样的内容：

position: 'absolute',
alignSelf: 'center',
bottom: 0

您也可以通过 top、left 和 right 属性调整绝对定位。