如何在 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" />
          )}
        />
...
</>
)