react-native订单进度小部件

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

/**
 *  步骤进度
数据格式
 *  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(
            
               {
                  (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(
                             
                                  
                                       {
                                            (typeof(name)==="string" || typeof(name)==="number")?
                                            {name}:
                                            {name}
                                        }
                                  
                                  
                                       
                                      {
                                        !isLast && 
                                      }
                                  
                                  
                                        {
                                            (typeof(title)==="string" || typeof(title)==="number")?
                                            {title}:
                                            {title}
                                        }
                                        {
                                             (typeof(content)==="string" || typeof(content)==="number")?
                                             {content}:
                                             {content}
                                        }
                                  
                             
                        );
                    })
               }  
            
        );
    }
}

使用方法：

使用方法：
导入 UIProcess组件
	

效果：

标题