React Native Vertical Delivery Progress Bar

问题

How can I put a Vertical progress bar on React Native

I need to make a delivery bar progress

**Example: driver is at point A and needs to go to point B ...*

回答1:

This is a bit tricky but do able. You will have to have a vertical line and place the items horizontally in a row format.

Lets say you have a data structure like this.You can update the current location using the flag and set the labels.

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 },
];

This will be your component which handle the map

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>
  );
};

These will have to be styled to place the views properly

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' },
});

You can use the component like this

 <MapProgress data={data} />

You can tryout the snack below https://snack.expo.io/@guruparan/mapprogress

回答2:

You better try this lib: https://github.com/oblador/react-native-progress#progressbar

Or you can create a your custom progressbar, it pretty simple in React Native. You could try

<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>

I think that it.

来源：https://stackoverflow.com/questions/62163582/react-native-vertical-delivery-progress-bar

标签

android

ios

react-native

mobile

progress-bar