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

【问题标题】：How to properly position a view with AnimatedCircularProgress in React Native如何在 React Native 中使用 AnimatedCircularProgress 正确定位视图
【发布时间】：2016-11-05 04:21:18
【问题描述】：

我正在使用一个名为 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>

这是作者如何将文本定位在一个圆圈内的sn-p，对于不同尺寸的屏幕，这将不合适。

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>

所以我试图将绿色框放在我的圆圈内，使其与圆圈相关，并且始终居中。

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

【问题讨论】：

标签： javascript css reactjs react-native jsx

【解决方案1】：

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

【讨论】：