如何以编程方式更改总共5页的viewpager中前2页的点指示器颜色

Question

我有一个使用rn-viewpager（本机反应）的viewpager组件，其中我有5页，每页呈现一个包含多个字段的表单。我有一个页面点指示器，它将为5个页面渲染5个点。默认情况下，所有点均为蓝色。我需要将前2页的指示器设为红色，而其余3页应设为蓝色。红点指示符表示前2页中的所有字段均为必填字段，一旦用户输入了前2页的数据，则点指示符应再次变为蓝色。我该如何处理？这是我的代码

    return (  
          <View style={{ flex: 1 }}>
             <IndicatorViewPager
                style={{ height: deviceHeight - 55, backgroundColor: 'white' }}
      indicator={this._renderDotIndicator()}
      onPageSelected={(e) => {
        console.log("onpageselected",e, e.position);
        this.setState({ vpPagePosition: e.position });
      }}
      ref={viewPager => { this.viewPager = viewPager }}
    >

    </IndicatorViewPager>
    {this.renderSaveButton()}
  </View>

);

     _renderDotIndicator() {

       //tried this but makes all dots red color 
      //backgroundColor: this.state.disableSubmitButton && 
        //this.viewPager._currentIndex == 0  ? 'red'  : 'lightblue'
       //let arr = [];
      let color='';
       if(this.viewPager)
      {
      if(this.state.disableSubmitButton && 
        this.viewPager._currentIndex ==0)
        {
         color = 'red'
         }else{
          color = 'lightblue'
        }

       }

  return (
      <PagerDotIndicator
        style={}
      pageCount={6} 
        dotStyle={{ borderRadius: 1, height: 25, backgroundColor: 
        color, bottom: -5 }}
        selectedDotStyle={{ backgroundColor: 'darkblue', 
       borderRadius: 1, height: 45, }} />

            );