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