欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react-native 封装一个可以滑动的步骤条 Step

程序员文章站 2022-06-07 11:16:37
...

可以根据prop (step)滑动 到指定位置,可以左右滑动
react-native 封装一个可以滑动的步骤条 Step
react-native 封装一个可以滑动的步骤条 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'
  }
});

相关标签: react-native