如何在 React Native 中使用 AnimatedCircularProgress 正确定位视图

Question

我正在使用一个名为 react-native-circular-progress 的模块但我无法在圆圈内正确放置视图（由统计信息组成）。

据作者说： 您还可以定义一个函数，它会接收当前进度，例如，将其显示在圆圈内：

<AnimatedCircularProgress
  size={200}
  width={3}
  fill={this.state.fill}
  tintColor="#00e0ff"
  backgroundColor="#3d5875">
  {
    (fill) => (
      <Text style={styles.points}>
        { this.state.fill }
      </Text>
    )
  }
</AnimatedCircularProgress>

这是作者如何将文本放置在圆圈内的片段，当涉及到不同尺寸的屏幕时，这将是不合适的。

points: {
  backgroundColor: 'transparent',
  position: 'absolute',
  top: 72,
  left: 56,
  width: 90,
  textAlign: 'center',
  color: '#7591af',
  fontSize: 50,
  fontWeight: "100"
},

到目前为止，这是我的代码，当涉及到不同的屏幕尺寸时，我将我的圆圈大小设计得尽可能动态。

<View tabLabel="Progress" style={styles.progress}>
    <View style={styles.progressView}>
        <AnimatedCircularProgress
            size={0.8 * deviceWidth}
            width={0.08 * deviceWidth}
            fill={this.state.progressSliderValue}
            tintColor="#1A81FF"
            backgroundColor="#EBEBF1"
        ></AnimatedCircularProgress>
    </View>

    <View style={styles.progressViewText}>
        <Text style={styles.mileageText}>
            {this.state.patientMileageStatic}
        </Text>
        <Text style={styles.kmText}>KM</Text>
        <Text style={styles.targetText}>
            Target: {this.state.patientTarget} km
        </Text>
    </View>

    <View style={styles.sosButtonWrapper}>
        <TouchableHighlight
            underlayColor="gray"
            onPress={this.sosPressed}
            style={styles.sosButton}
        >
            <Text style={styles.buttonText}>SOS</Text>
        </TouchableHighlight>
    </View>
</View>

所以我试图将绿色框放在我的圆圈内，以一种相对于圆圈的方式，并且始终居中。

有什么解决办法吗？文档没有提供足够的解释。

Answer 1

我遇到了同样的问题，我只是更改了 styles.point 中的顶部和左侧值以使其居中。尝试更改那里的值。 Click this to see the snapshot

如何在 React Native 中使用 AnimatedCircularProgress 正确定位视图

How to properly position a view with AnimatedCircularProgress in React Native

javascript

css

jsx

reactjs

react-native