无法在自定义反应中使自定义StepIndicator

Question

我是新来对本机做出反应的人，我想像上面的picture一样使用stepIndicator。但是StepIndicator看起来不太好，即使我无法增加分隔符的高度并且我无法添加一些文本在付款日期等步骤的中间，标题也不能直接对齐，我只能更改步骤和分隔符的颜色和宽度。因此，我尝试制作自定义的StepIndicator，但是我无法做到这一点。

const标签= [{标题：“订购的订单”，}，{标题：“付款”，}，{标题：“已调度”，}，{标题：“站点”，}];

const stepIndicatorStyles = {
  stepIndicatorSize: 20,
  currentStepIndicatorSize:20,
  separatorStrokeWidth: 1,
  currentStepStrokeWidth: 20,
  stepStrokeCurrentColor: '#FFAA01',
  separatorFinishedColor: '#aaaaaa',
  separatorUnFinishedColor: '#aaaaaa',
  stepIndicatorFinishedColor: '#FFAA01',
  stepIndicatorUnFinishedColor: '#636363',
  stepIndicatorCurrentColor: '#FFAA01',
  stepIndicatorLabelFontSize: 0,
  currentStepIndicatorLabelFontSize: 0,
  stepIndicatorLabelCurrentColor: '#000000',
  stepIndicatorLabelFinishedColor: '#FFAA01',
  stepIndicatorLabelUnFinishedColor: 'rgba(255,255,255,0.5)',
  labelColor: 'black',
  labelSize: 18,
  currentStepLabelColor: 'black'
}


In class in render() method..

 <StepIndicator
        customStyles={stepIndicatorStyles}
        currentPosition={this.state.currentPosition}
        stepCount={4} 
        direction='vertical'
        labels={labels.map(title => title.title)}
        />

请帮助我解决此问题。我试图在2周内实现这一目标，但失败了。在此先感谢。