React Native 垂直投放进度条

Question

如何在 React Native 上放置垂直进度条

我需要做一个送货栏进度

**例子：driver在A点，需要去B点...*

Answer 1

你最好试试这个库：https://github.com/oblador/react-native-progress#progressbar

或者您可以创建自定义进度条，这在 React Native 中非常简单。你可以试试

<View style={{height: 50, width: '100%', flexDirection: 'row'}}>
     <View style={{height: '100%', flex: this.state.currentProgress, backgroundColor: "blue"}}/>
     <View style={{height: '100%', flex: 100 - this.state.currentProgress, backgroundColor: "grey"}}/>
</View>

我认为是。

Answer 2

这有点棘手，但可以做到。您必须有一条垂直线，并以行格式水平放置项目。

假设您有一个像 this.You 这样的数据结构，可以使用标志更新当前位置并设置标签。

const data = [
  { title: 'Stop 1', letter: 'A', isCurrent: false },
  { title: 'Stop 2', letter: 'B', isCurrent: false },
  { title: 'Stop 3', letter: 'C', isCurrent: false },
  { title: 'Stop 4', letter: 'D', isCurrent: true },
  { title: 'Stop 5', letter: 'E', isCurrent: false },
];

这将是您处理地图的组件

const MapProgress = (props) => {
  if (!props.data || props.data.lenght === 0) return null;

  const firstItem = props.data.shift();
  return (
    <View style={{ flex: 1 }}>
      <View style={styles.verticalLine}></View>
      <View style={styles.verticalWrap}>
        <View style={styles.itemWrap}>
          <View style={styles.firstPoint}></View>
          <View style={{ marginLeft: 5, flex: 1 }}>
            <Text>{firstItem.title}</Text>
          </View>
        </View>

        {props.data.map((item) => (
          <View style={styles.itemWrap}>
            <View style={styles.pointWrap}>
              <Text
                style={[
                  styles.markerText,
                  item.isCurrent ? styles.currentMarker : null,
                ]}>
                {item.letter}
              </Text>
            </View>
            <View style={{ marginLeft: 5, flex: 1 }}>
              <Text style={item.isCurrent ? styles.currentMarker : null}>
                {item.title}
              </Text>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

必须设置这些样式才能正确放置视图

const styles = StyleSheet.create({
  verticalLine: {
    backgroundColor: 'black',
    width: 2,
    height: '95%',
    position: 'absolute',
    marginLeft: 35,
    marginTop: 20,
  },
  verticalWrap: {
    justifyContent: 'space-between',
    height: '100%',
  },
  itemWrap: {
    width: 200,
    height: 40,
    borderWidth: 1,
    marginLeft: 20,
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
  },
  pointWrap: {
    backgroundColor: 'black',
    height: 20,
    width: 20,
    marginLeft: 5,
    alignItems: 'center',
  },
  firstPoint: {
    backgroundColor: 'black',
    borderRadius: 20,
    height: 10,
    width: 10,
    marginLeft: 10,
  },
  markerText: { color: 'white' },
  currentMarker: { color: 'green' },
});

你可以像这样使用组件

 <MapProgress data={data} />

你可以试试下面的小吃 https://snack.expo.io/@guruparan/mapprogress

Answer 3

对于垂直进度条。你甘蔗使用 react-native-progress npm 并使用样式变换简单地旋转栏属性。

import React from 'react';
import * as Progress from 'react-native-progress';

return <Progress progress={progress} style={{ transform: [{ rotate: '-90deg' }] }} />;

请参考原回答： https://github.com/oblador/react-native-progress/issues/61#issuecomment-322694271

React Native 垂直投放进度条

React Native Vertical Delivery Progress Bar

mobile

android

ios

progress-bar

react-native