react-native - 无法让 renderStepIndicator 在 react-native-step-indicator 上工作

问题描述

我想我没有正确理解文档。

文档说：这需要一个返回位置的函数：数字，或者一个 stepStatus：它需要一个字符串来呈现步骤内的自定义内容

我的目标是呈现一个复选标记而不是默认情况下的数字。我试图返回一串“测试”，但它不起作用。

        <StepIndicator
            customStyles={customStyles}
            currentPosition={this.state.currentPosition}
            stepCount={this.state.stepCount}
            renderStepIndicator={() => {
            this.renderStepIndicator();
            }}
            labels={labels}
          />

这是返回字符串的函数

     renderStepIndicator() {
         return 'test';
      }

我不确定我在这里缺少什么。我也想返回一个复选标记图标。我见过人们在做 git，但我不确定这是否只需要一个字符串或一个整数。

标签： react-nativejsx

这里该函数返回两个参数步进位置和步进状态。你可以像这样使用这个功能，

<StepIndicator
    customStyles={customStyles}
    currentPosition={this.state.currentPosition}
    stepCount={this.state.stepCount}
    renderStepIndicator={(stepPosition,stepStatus) => {
       this.renderStepIndicator(stepPosition,stepStatus);
    }}
    labels={labels}
 />

渲染功能就像，

renderStepIndicator(stepPosition, stepStatus) {
  return <Icon name={"check"} size={20} color={stepStatus === 'finished' ? "green" : "gray"} /> ;
}

此功能呈现检查图标。如果您的步骤已完成，则显示绿色检查，否则显示灰色检查。

有关更多详细信息，您可以查看此示例，

https://github.com/24ark/react-native-step-indicator/blob/master/example/src/HorizontalStepIndicator.tsx

react-native - 无法让 renderStepIndicator 在 react-native-step-indicator 上工作

问题描述

解决方案

推荐阅读