如何在 React Native 步进器中添加自定义图标

Question

我已经用数字实现了 React Native 步进器。 如下：

我想向步进器添加一些自定义图标而不是数字。

我想添加自定义图标，例如已确认订单、已发货、已交付图标等。有什么办法吗？

下面是步进器的代码，如下所示：

import StepIndicator from 'react-native-step-indicator';

const labels = ["Cart","Delivery Address","Order Summary","Payment Method","Track"];
const customStyles = {
  stepIndicatorSize: 25,
  currentStepIndicatorSize:30,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 3,
  stepStrokeCurrentColor: '#fe7013',
  stepStrokeWidth: 3,
  stepStrokeFinishedColor: '#fe7013',
  stepStrokeUnFinishedColor: '#aaaaaa',
  separatorFinishedColor: '#fe7013',
  separatorUnFinishedColor: '#aaaaaa',
  stepIndicatorFinishedColor: '#fe7013',
  stepIndicatorUnFinishedColor: '#ffffff',
  stepIndicatorCurrentColor: '#ffffff',
  stepIndicatorLabelFontSize: 13,
  currentStepIndicatorLabelFontSize: 13,
  stepIndicatorLabelCurrentColor: '#fe7013',
  stepIndicatorLabelFinishedColor: '#ffffff',
  stepIndicatorLabelUnFinishedColor: '#aaaaaa',
  labelColor: '#999999',
  labelSize: 13,
  currentStepLabelColor: '#fe7013'
}


constructor() {
    this.state = {
        currentPosition: 0
    }
}

render() {
  return (
    <StepIndicator
         customStyles={customStyles}
         currentPosition={this.state.currentPosition}
         labels={labels}
    />
  )
}

Answer 1

您必须为“renderStepIndicator”道具传递 function。

import Icon from 'react-native-vector-icons/FontAwesome';

const icons=["rocket","star"];

 <StepIndicator
         customStyles={customStyles}
         currentPosition={this.state.currentPosition}
         labels={labels}
         renderStepIndicator={({position,stepstatus})=>(<Icon name={icons[position]} size={30} color="#900" />)}
    />

图标可以是您的自定义组件，也可以是库中的图标，如反应原生矢量图标

Answer 2

在下面共享的示例中，我使用的是 react-native-step-indicator-v2，但属性在某种程度上类似于 StepIndicator-v1。

import { Entypo } from "@expo/vector-icons";
import StepIndicator from "react-native-step-indicator-v2";

const labels = [
  "1. Cart Selection",
  "2. Processing",
  "3. Order dispatched",
  "4. Order Delivered",
  "5. Order Paid",
];

const customStyles = {
  stepIndicatorSize: 25,
  currentStepIndicatorSize: 30,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 3,
  stepStrokeCurrentColor: "#fe7013",
  stepStrokeWidth: 3,
  stepStrokeFinishedColor: "#fe7013",
  stepStrokeUnFinishedColor: "#aaaaaa",
  separatorFinishedColor: "#fe7013",
  separatorUnFinishedColor: "#aaaaaa",
  stepIndicatorFinishedColor: "#fe7013",
  stepIndicatorUnFinishedColor: "#ffffff",
  stepIndicatorCurrentColor: "#ffffff",
  stepIndicatorLabelFontSize: 13,
  currentStepIndicatorLabelFontSize: 13,
  stepIndicatorLabelCurrentColor: "#fe7013",
  stepIndicatorLabelFinishedColor: "#ffffff",
  stepIndicatorLabelUnFinishedColor: "#aaaaaa",
  labelColor: "#999999",
  labelSize: 13,
  currentStepLabelColor: "#fe7013",
};

const icons = ["shopping-cart", "cycle", "thumbs-up", "pin", "wallet"];
const [currentPosition, setCurrentPosition] = useState(0);

return (
<>
....
<StepIndicator
          customStyles={customStyles}
          currentPosition={currentPosition}
          labels={labels}
          direction="vertical"
          renderStepIndicator={({ position, stepStatus }) => (
            <Entypo name={icons[position]} size={16} color="#fff" />
          )}
        />
...
</>
)