标题：引领您轻松导航的React Native进度步骤组件

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
const ProgressStepper = ({ steps, activeStep }) => {
  return (
    <View style={styles.container}>
      {steps.map((step, index) => (
        <View
          key={step.id}
          style={[
            styles.step,
            index < activeStep ? styles.activeStep : null
          ]}
        >
          <Text style={styles.stepText}>{step.label}</Text>
        </View>
      ))}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginVertical: 10
  },
  step: {
    width: 50,
    height: 50,
    borderRadius: 25,
    borderWidth: 2,
    borderColor: '#e7e7e7',
    justifyContent: 'center',
    alignItems: 'center'
  },
  activeStep: {
    backgroundColor: '#2ecc71',
    borderColor: '#2ecc71'
  },
  stepText: {
    fontSize: 16,
    color: '#333333',
    fontWeight: 'bold'
  }
});
 
export default ProgressStepper;

这个代码实例展示了如何创建一个简单的React Native进度步骤组件。它接受两个props：steps和activeStep。steps是一个对象数组，每个对象包含步骤的标识符和标签。activeStep表示当前激活的步骤。组件使用steps数组来渲染一个个步骤视图，并根据是否是当前激活步骤来应用不同的样式。