react-native订单进度小部件

我不是女神ヾ 2021-09-19 17:02 339阅读 0赞

编写一个关于订单进度的小部件

/**
     *  步骤进度
    数据格式
     *  data=[
     *      {
                name:"下单成功",
                title:"2019-05-20",
                content:"fsdsdfsdf的赛场上的",
                isExecuted:true//控制原点和线的颜色
            },
     *  ]
     */
    export class UIProcess extends Component{
        state={
            data:this.props.data || []
        }
        componentWillReceiveProps(nextProps){
           this.setState({data:nextProps.data});
        }
        styles = StyleSheet.create({
            box:{
               backgroundColor:"white",
               padding:20
            },
            text:{
               minHeight:20,
               justifyContent:"center",
            },
            item:{
                width:"100%",
                minHeight:200,
                flexDirection:"row",
            },
            itemLeft:{
               width:100,
               alignItems:"flex-end"
            },
            itemCenter:{
               alignItems:"center",
               marginHorizontal:10
            },
            itemSign:{
               width:20,
               height:20,
               borderRadius:20,
               backgroundColor:"#fb4f04",
            },
            itemline:{
               flex:1,
               
               borderLeftColor:"green",
               borderLeftWidth:1,
               borderStyle: 'dotted',
            },
            itemRight:{
                flex:1,
            },
            titleText:{
                fontSize:16,
                color:"#313131"
            }
        });
        render(){
            let data = this.state.data;
            const styles = this.styles;
            return(
                <View style={[styles.box]}>
                   {
                      (data && data.length) && 
                        data.map((item,index)=>{
                            let {name,title,content,isExecuted} = item;
                            let isLast = (index+1>=data.length);
                            let nextExecuted = !isLast?data[index+1].isExecuted:true;
                            return(
                                 <View key={index} style={[styles.item,{minHeight:(isLast?0:120)}]}>
                                      <View style={[styles.itemLeft]}>
                                           {
                                                (typeof(name)==="string" || typeof(name)==="number")?
                                                <Text style={[styles.text,{textAlign:"right"}]}>{name}</Text>:
                                                <View>{name}</View>
                                            }
                                      </View>
                                      <View style={[styles.itemCenter]}>
                                           <View style={[styles.itemSign,{backgroundColor:(isExecuted?"#d24507":"#cecece")}]} />
                                          {
                                            !isLast && <View style={[styles.itemline,
                                            {borderLeftColor:((isExecuted && nextExecuted)?"#d24507":"#cecece")}]} />
                                          }
                                      </View>
                                      <View style={[styles.itemRight]}>
                                            {
                                                (typeof(title)==="string" || typeof(title)==="number")?
                                                <Text style={[styles.text,styles.titleText]}>{title}</Text>:
                                                <View>{title}</View>
                                            }
                                            {
                                                 (typeof(content)==="string" || typeof(content)==="number")?
                                                 <Text>{content}</Text>:
                                                 <View>{content}</View>
                                            }
                                      </View>
                                 </View>
                            );
                        })
                   }  
                </View>
            );
        }
    }

使用方法：

使用方法：
    导入 UIProcess组件
    	<UIProcess data={ [{
    			name:'1111111', 
    			title:"2019-05-20",
                			content:"内容111111111",
                			isExecuted:true//控制原点和线的颜色
    			},{
    			name:'2222222', 
    			title:"2019-05-22",
                			content:"内容222222222",
                			isExecuted:true
    			}]
    			}
    	/>

效果：

![订单进度][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70] 标题

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTk3NTQ3_size_16_color_FFFFFF_t_70]: /images/20210908/fbcafb72e6af4cc0a6bd7d6e92f921b7.png