Как создать простой прогресс-бар в react native

Всем привет

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

Вы можете пропустить шаг за шагом реализацию, посмотрев пример реализации на expo

Вот изображение того, что я буду реализовывать.

Построение индикатора выполнения

Технологический стек: React-native & Styled-components

Если посмотреть на изображение выше, то прогресс-бар содержит 2 элемента

внешний контейнер
линия для отображения прогресса

реализация компонента прогрессбара

const ProgressBar = (props) =>{
  const { 
       progress, 
       height = 8, 
       outerBackgroundColor, 
       innerBackgroundColor, 
       padded = true
  } = props;

  return null;
}

Вход в полноэкранный режим Выход из полноэкранного режима

Реализация контейнера прогресса:

import styled from 'styled-components/native';

<Container
    height={height}
    padded={padded}
    outerBackgroundColor={outerBackgroundColor}
   >
 {/* the line indicator goes here */}
</Container>

const Container = styled.View`
  width: "100%";
  borderRadius: 16;
  alignItems: flex-start;
  justifyContent: center;
  height: ${props => props.height};
  backgroundColor: ${props => props.outerBackgroundColor};
  paddingHorizontal: ${props => props.padded ? 3 : 0};
`;

Вход в полноэкранный режим Выход из полноэкранного режима

Пояснения:

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

высота: это высота индикатора прогресса
padded: реквизит, показывающий, должна ли полоса прогресса быть заполнена или нет
outerBackgroundColor: это цвет контейнера прогрессбара.

Реализация содержимого прогресс-бара

import styled from 'styled-components/native';

<Content 
      height={height}
      padded={padded}
      progress={progress} 
      innerBackgroundColor={innerBackgroundColor}
/>

const Content = styled.View`
  borderRadius: 16;
  height: ${props => props.padded ? (props.height / 2) : props.height};
  backgroundColor: ${props => props.innerBackgroundColor};
  width: ${props => props.progress}%;
`;

Вход в полноэкранный режим Выход из полноэкранного режима

Пояснения:

Внутреннее содержимое — это индикатор прогресса, который принимает несколько реквизитов

height: это высота индикатора прогресса, (если прогресс заполнен, то отображаемая высота будет равна половине высоты, переданной в содержимое)
padded: реквизит, показывающий, должен ли прогресс бар быть padded или нет
progress: это ширина индикатора прогресса (0 — 100%)
innerBackgroundColor: это цвет прогресса.

Полный код: ссылка

import styled from 'styled-components/native';

const ProgressBar = ({progress, height = 8, outerBackgroundColor, innerBackgroundColor, padded = true}) =>(
  <Container
    height={height}
    padded={padded}
    outerBackgroundColor={outerBackgroundColor}
   >
    <Content 
      height={height}
      padded={padded}
      progress={progress} 
      innerBackgroundColor={innerBackgroundColor}
    />
  </Container>
);

const Container = styled.View`
  width: "100%";
  borderRadius: 16;
  alignItems: flex-start;
  justifyContent: center;
  height: ${props => props.height};
  backgroundColor: ${props => props.outerBackgroundColor};
  paddingHorizontal: ${props => props.padded ? 3 : 0};
`;

const Content = styled.View`
  borderRadius: 16;
  height: ${props => props.padded ? (props.height / 2) : props.height};
  backgroundColor: ${props => props.innerBackgroundColor};
  width: ${props => props.progress}%;
`;

Вход в полноэкранный режим Выйти из полноэкранного режима

Спасибо, что ознакомились с этим уроком.

Если у вас есть какие-либо вопросы, отзывы или комментарии, пожалуйста, дайте мне знать.

Вы можете связаться со мной на
twitter email