react-native 封裝一個可以滑動的步驟條 Step

可以根據prop (step)滑動 到指定位置，可以左右滑動

import React, { Component } from "react";
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity
} from "react-native";
import { scaleSizeW, setSpText } from "../utils/util";

export default class ProcessBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      step: props.step,
      stateArr: [
        { id: 1, name: "開始" },
        { id: 2, name: "補全工商信息" },
        { id: 3, name: "錄入工商結果" },
        { id: 4, name: "收件刻章" },
        { id: 5, name: "證件郵寄" },
        { id: 6, name: "代客戶簽收" }
      ]
    };
  }
  componentWillReceiveProps(nextProps) {
    this.setState({
      step: nextProps.step
    });
  }
  componentDidMount() {
    if (this.state.step > 3) {
      setTimeout(() => {
        this._scrollView.scrollTo({ x: 500, y: 0, animated: true });
      }, 0);
    }
  }
  // 用於二期跳轉頁面 （在stateArr添加頁面的screen）
  goStepPage = item => {};
  render() {
    const { stateArr, step } = this.state;
    return (
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        ref={ref => (this._scrollView = ref)}
        style={styles.scrollView}
        contentContainerStyle={styles.scrollViewContent}
      >
        {stateArr.map((item, index) => (
          <TouchableOpacity
            style={[
              styles.stepItem
            ]}
            key={item.id}
            onPress={item => {
              this.goStepPage(item);
            }}
            activeOpacity={1}
          >
            <View style={[styles.stepNumBox,step >= item.id && styles.stepNumBoxActive]}>
              <Text style={[styles.stepNum,step >= item.id && styles.stepNumActive]}>{item.id}</Text>
            </View>
            <Text style={[styles.stepName,step >= item.id && styles.stepNameActive]}>{item.name}</Text>
            {index + 1 < stateArr.length && (
              <Text style={[styles.stepIcon,step >= item.id && styles.stepIconActive]}>{"\ue633"}</Text>
            )}
          </TouchableOpacity>
        ))}
      </ScrollView>
    );
  }
}

let styles = StyleSheet.create({
  scrollView: {
    width: "100%",
    height: scaleSizeW(106),
    backgroundColor: "white"
  },
  scrollViewContent: {
    height: "100%",
    flexDirection: "row",
    flexWrap: "nowrap",
    alignItems: "center"
  },
  stepItem: {
    height: "100%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-around"
  },
  stepNumBox: {
    width: scaleSizeW(40),
    height: scaleSizeW(40),
    borderRadius: scaleSizeW(20),
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f9ff"
  },
  stepNumBoxActive: {
    backgroundColor: "#FF6737"
  },
  stepNum: {
    color: "#9DAAB8",
    fontSize: setSpText(28)
  },
  stepNumActive:{
    color:'white'
  },
  stepName: {
    fontSize: setSpText(20),
    color: "#6f7d8a",
    marginHorizontal:scaleSizeW(10)
  },
  stepNameActive:{
   color:"#FF6737"
  },
  stepIcon: {
    fontFamily: "iconfont",
    fontSize: setSpText(16),
    color:'#9DAAB8',
    marginRight:scaleSizeW(10)
  },
  stepIconActive:{
    color:'#FF6737'
  }
});