React Native：构建进度条组件答案

【问题标题】：React Native: Building a Progress Step Bar ComponentReact Native：构建进度条组件
【发布时间】：2021-09-08 13:13:54
【问题描述】：

您将如何使用组件来通知用户他们在哪一步？我有这样的设置：

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import styled from 'styled-components/native';

const ProgressBar = () => {
  return (
    <View style={styles.wrapper}>
      <View style={styles.stepWrapper}>
        <Bar />
        <Text style={styles.stepText}>1. Photo</Text>
      </View>
      <View style={styles.stepWrapper}>
        <Bar />
        <Text style={styles.stepText}>2. Details</Text>
      </View>
      <View style={styles.stepWrapper}>
        <Bar />
        <Text style={styles.stepText}>3. Price</Text>
      </View>
      <View style={styles.stepWrapper}>
        <Bar />
        <Text style={styles.stepText}>4. Finish</Text>
      </View>
    </View>
  );
};

const Bar = styled.View`
  border: 1px solid red;
`;

const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
  },
  stepWrapper: {
    textAlign: 'center',
    justifyContent: 'center',
    width: '25%',
  },
  stepText: {
    textAlign: 'center',
    padding: 10,
    fontSize: 13,
  },
});
export default ProgressBar;

这会输出这个：

但是这个页面应该是第三步（3.价格）。由于类名，一切都是红色的，但我很好奇如何设置它，以便我可以将此组件插入每个屏幕并传递步骤的数字道具或其他东西。

可能是这样的：

<ProgressBar step={3} />

也许在我的组件中，我可以将所有颜色更改为<Bar /> 的第三个元素，或者是否有更优雅的方式？

【问题讨论】：

标签： react-native components

【解决方案1】：

我会尝试类似：

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import styled from 'styled-components/native';

const ProgressBar = ({ step }) => {
  return (
    <View style={styles.wrapper}>
      <View style={styles.stepWrapper}>
        {step === 1 ? <Bar /> : <BarGray />}
        <Text style={styles.stepText}>1. Photo</Text>
      </View>
      <View style={styles.stepWrapper}>
        {step === 2 ? <Bar /> : <BarGray />}
        <Text style={styles.stepText}>2. Details</Text>
      </View>
      <View style={styles.stepWrapper}>
        {step === 3 ? <Bar /> : <BarGray />}
        <Text style={styles.stepText}>3. Price</Text>
      </View>
      <View style={styles.stepWrapper}>
        {step === 4 ? <Bar /> : <BarGray />}
        <Text style={styles.stepText}>4. Finish</Text>
      </View>
    </View>
  );
};

const Bar = styled.View`
  border: 1px solid red;
`;

const BarGray = styled.View`
  border: 1px solid gray;
`;



const styles = StyleSheet.create({
  wrapper: {
    flexDirection: 'row',
  },
  stepWrapper: {
    textAlign: 'center',
    justifyContent: 'center',
    width: '25%',
  },
  stepText: {
    textAlign: 'center',
    padding: 10,
    fontSize: 13,
  },
});
export default ProgressBar;

【讨论】：

【解决方案2】：

尝试使用强大的 npm 包来内置对步进栏的支持

https://www.npmjs.com/package/react-native-stepper-ui

【讨论】：

【解决方案3】：

继续你的目标，让我们创建一个名为 ProgressBar 的组件，它将进度作为道具并将进度显示为 UI

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const ProgressBar = ({ step = 1 }) => {
  const stepArr = ['Photo', 'Details', 'Price', 'Finish'];
  return (
    <View style={styles.container}>
      {stepArr.map((element, index) => (
        <View style={styles.singleStep}>
          <View
            style={{
              height: 2,
              backgroundColor: step < index + 1 ? 'red' : 'green',
              width: '100%',
            }}
          />
          <Text style={styles.singleTxt}>{`${index + 1}. ${element}`}</Text>
        </View>
      ))}
    </View>
  );
};

export default ProgressBar;

const styles = StyleSheet.create({
  singleStep:{ flex: 1, alignItems: 'center' },
  singleTxt:{ marginTop: 10 }
});

现在在每个页面中导入 ProgressBar 并提到它的进度，例如在价格页面中。

我认为这是最简单和优雅的方式。如果您觉得有用，请在 cmets 中告诉我。谢谢

【讨论】：