React Native Step Indicator 使用教程

项目介绍

react-native-step-indicator 是一个用于 React Native 的开源库，它提供了一个步骤指示器组件，可以帮助开发者创建多步骤的流程界面。该组件支持自定义样式和标签，适用于各种需要步骤导航的应用场景，如表单填写、购物车结账等。

项目快速启动

安装

首先，你需要通过 npm 或 yarn 安装 react-native-step-indicator：

npm install react-native-step-indicator

或者

yarn add react-native-step-indicator

基本使用

以下是一个简单的示例，展示如何在 React Native 项目中使用 react-native-step-indicator：

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import StepIndicator from 'react-native-step-indicator';

const labels = ["Step 1", "Step 2", "Step 3"];
const customStyles = {
  stepIndicatorSize: 25,
  currentStepIndicatorSize: 30,
  separatorStrokeWidth: 2,
  currentStepStrokeWidth: 3,
  stepStrokeCurrentColor: '#fe7013',
  stepStrokeWidth: 2,
  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 App = () => {
  const [currentPosition, setCurrentPosition] = useState(0);

  return (
    <View style={styles.container}>
      <StepIndicator
        customStyles={customStyles}
        currentPosition={currentPosition}
        labels={labels}
        stepCount={3}
        onPress={(position) => setCurrentPosition(position)}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    justifyContent: 'center',
  },
});

export default App;

应用案例和最佳实践

自定义标签和图标

你可以通过 renderLabel 和 renderStepIndicator 属性来自定义标签和步骤指示器的内容。例如，使用图标代替默认的数字标签：

const renderLabel = ({ position, stepStatus, label, currentPosition }) => {
  return (
    <View>
      <Text style={position === currentPosition ? styles.pressedTitle : styles.title}>
        {label}
      </Text>
    </View>
  );
};

const renderStepIndicator = ({ position, stepStatus }) => {
  let icon;
  switch (position) {
    case 0:
      icon = '🌟';
      break;
    case 1:
      icon = '🚀';
      break;
    case 2:
      icon = '🏆';
      break;
    default:
      icon = '❓';
  }
  return <Text>{icon}</Text>;
};

<StepIndicator
  customStyles={customStyles}
  currentPosition={currentPosition}
  labels={labels}
  stepCount={3}
  onPress={(position) => setCurrentPosition(position)}
  renderLabel={renderLabel}
  renderStepIndicator={renderStepIndicator}
/>

动态步骤数据

你可以根据后端返回的数据动态生成步骤指示器的内容：

const stepsData = [
  { name: 'Step 1', description: 'First step' },
  { name: 'Step 2', description: 'Second step