无法使renderStepIndicator处理反应本机步骤指示器

Question

我认为我没有正确理解文档。

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

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

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

这是返回字符串的函数

renderStepIndicator() {
return 'test';
}

我不确定我在这里错过了什么。我还想返回一个选中标记的图标。我见过有人做git，但我不确定如果这只需要一个字符串或一个整数。

Answer 1

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

<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

Answer 2

上面的解决方案对我不起作用，所以尝试了一些更改，过了一段时间后，如果有些人仍然面临这个问题，我得到了这个有效的解决方案，请尝试使用此代码。

1.将此代码放入您的StepIndicator道具

renderStepIndicator={({ position, stepStatus }) =>
renderStepIndicatorRender(position, stepStatus)
}

2.创建一个函数来渲染图标

const renderStepIndicatorRender = (stepPosition, stepStatus) => {
return stepStatus === "finished" ? (
<Icon name="check" size={12} color="#fff" />
) : (
<Text>{stepPosition}</Text>
);