Циркулярный прогресс в реакции-родной

Question

Я пытаюсь создать круговой компонент прогресса в реакции-native (как показано на изображении).

Я пробовал пройти через художественную библиотеку реагировать-native. Но это кажется мне немного сложным. Просто схема, как это можно сделать, мне очень поможет.

P.S .: Библиотека, такая как this, не помогает, так как она недостаточно гибкая, чтобы отображать числа в центре.

Answer 1

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>