如何在React Native中实现StepIndicator

时间:2019-06-04 08:37:54

标签: javascript node.js reactjs react-native ecmascript-6

我正在尝试在我的应用程序中实现StepindIcator。 如何显示带有“步骤标签”的子标签(自定义标签)。 我猜有为此的renderLabel(),但我不能使用它。 我能够动态打印步骤标签,当前位置和stepCount。但是我在为每个步骤实现“自定义标签”时遇到问题

下面是我必须显示的数组。

_activityName -As a Steps Labels
 stepCount= lenght of array 
currentPosition: currentStepPosition.length (count of _activityStatus("I"))
Now I have to display custom steps below the Steps lebels .
("_maxHoldTime" I have to display with _activityName in 2 lines )
for example 


 FXL_ACT1
    _maxHoldTime: "60"
       |
   FXL_ACT2"
    _maxHoldTime: "60"



  currentNextActivity: Array(3)
        0:
        __typename: "CurrentNextActivity"
        _activityName: "FXL_ACT1"
        _activityStatus: "I"
        _maxHoldTime: "60"
        _userName: "tecnotree"

       1:
        __typename: "CurrentNextActivity"
        _activityName: "FXL_ACT2"
        _activityStatus: "I"
        _maxHoldTime: "60"
        _userName: "tecnotree"
        __proto__: Object

        2:
        __typename: "CurrentNextActivity"
        _activityName: "FXL_ACT3"
        _activityStatus: "N"
        _maxHoldTime: "120"
        _userName: null


        StepsVaue:[],
        Steplabels:[],
        currentStepPosition:[]

// here I am pssing currentNextActivity array in StepsVaue .
         StepsVaue = workFlowDetails.currentNextActivity;
      Steplabels = StepsVaue.map(StepsVaue => {
           return StepsVaue._activityName;
    });

    currentStepPosition = StepsVaue.filter((item) => {
      return item._activityStatus === "I"
       });

             <StepIndicator
                customStyles={stepIndicatorStyles}
                currentPosition={currentStepPosition.length}
                stepCount={Steplabels.length}
                labels={Steplabels}
                renderLabel={}
                direction="vertical"
                  />

我必须显示所有带有子标签的步骤标签 谢谢

0 个答案:

没有答案