Кто-нибудь знает, как создать этот компонент в React native?

#react-native

Вопрос:

Я хочу создать компонент, как показано на прилагаемом изображении. Круг — это индикатор выполнения, а синий цвет — это прогресс, я мог бы использовать для этого компонент с круговым индикатором выполнения, но я не уверен, как я могу отображать даты, как показано на изображении, текст синим цветом будет текущей датой. Если кто-нибудь знает, как это сделать, пожалуйста, помогите.

Редактировать: я хочу добавить дату в индикатор выполнения, я нашел компонент с круговым индикатором выполнения.

1. Поможет ли это? github.com/bartgryszko/react-native-circular-progress

2. это может помочь вам github.com/tirthasourav/circular-date-selector , это делается с помощью github.com/react-native-community/react-native-svg#circle

3. @dejavu-reilzk Я отредактировал свой вопрос, я хочу добавить дату в индикатор выполнения, я нашел компонент с круговым индикатором выполнения.

4. @souravdey Я проверю пакет.

Ответ №1:

Это называется циклическим прогрессом

Использование

 import { AnimatedCircularProgress } from 'react-native-circular-progress';

<AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  onAnimationComplete={() => console.log('onAnimationComplete')}
  backgroundColor="#3d5875" />

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

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

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

 <AnimatedCircularProgress
  size={120}
  width={15}
  fill={100}
  tintColor="#00e0ff"
  backgroundColor="#3d5875"
  padding={10}
  renderCap={({ center }) => <Circle cx={center.x} cy={center.y} r="10" fill="blue" />}
  />

Наконец, вы можете вручную запустить временную анимацию на основе длительности, указав ссылку на компонент и вызвав animate(toValue, duration, easing) функцию следующим образом:

 <AnimatedCircularProgress
  ref={(ref) => this.circularProgress = ref}
  ...
/>

this.circularProgress.animate(100, 8000, Easing.quad); // Will fill the progress bar linearly in 8 seconds

animate-function возвращает временную анимацию, чтобы вы могли объединять, запускать параллельно и т.д.

Ответ №2:

Это то, что вы ищете… https://github.com/JesperLekland/react-native-svg-charts Это ProgressCircle. надеюсь, вам поможет…