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

偏执的太偏执、 2021-08-14 00:11 338阅读 0赞

可以根据prop (step)滑动 到指定位置，可以左右滑动  
![在这里插入图片描述][20191114114355650.jpg]  
![在这里插入图片描述][201911141144107.jpg]

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'
      }
    });

[20191114114355650.jpg]: /images/20210813/603ed6d4852f484190b9d462e28fe3c3.png
[201911141144107.jpg]: /images/20210813/8b9a02afce3a4416b5df6fc029dfc01b.png