Как правильно позиционировать вид с помощью AnimatedCircularProgress в React Native

javascript css reactjs react-native jsx

465 просмотра

1 ответ

547 Репутация автора

Я использую модуль под названием реагировать-родной-круговой-прогресс, но я не мог правильно разместить представление (состоит из статистики) внутри круга.

По словам автора: вы также можете определить функцию, которая будет получать текущий прогресс и, например, отображать его внутри круга:

<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>

Моя работа Поэтому я пытаюсь поместить зеленую коробку в свой круг таким образом, чтобы он был близок к кругу, и всегда быть в центре.

Есть ли обходной путь? Документы не дают достаточно объяснений.

Автор: J.Doe Источник Размещён: 03.07.2016 07:32

Ответы (1)


1 плюс

42 Репутация автора

Решение

У меня была та же проблема, я просто изменил верхнее и левое значения в styles.point, чтобы сделать его центральным. Попробуйте изменить значения там. Нажмите, чтобы увидеть снимок

Автор: user3239364 Размещён: 28.07.2016 06:43
Вопросы из категории :
32x32