react-native订单进度小部件

最新推荐文章于 2022-07-07 17:39:27 发布

随风小薇

最新推荐文章于 2022-07-07 17:39:27 发布

阅读量665

点赞数

分类专栏： react-native 笔记文章标签： rewact-native 订单小部件

react-native 同时被 2 个专栏收录

9 篇文章 5 订阅 ¥299.90 ¥399.90

订阅专栏

超级会员免费看

笔记

47 篇文章 1 订阅

订阅专栏

本文档介绍如何使用React-Native开发一个订单进度小部件，详细阐述了组件的实现过程及使用方法，并展示了实际运行效果。

摘要由CSDN通过智能技术生成

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

/**
 *  步骤进度
数据格式
 *  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
			}]
			}
	/>

效果：