React Native 实现物流进度信息

1.实现效果

2.直接上代码

'use strict';
import React,{Component} from 'react';
import {View,StyleSheet,Text,Dimensions} from 'react-native'
export default class Button extends Component {
    render() {
        let invoice = [{id: 111,content: '已签收,签收人：门卫',ctime: '2017-1-11 17:59'},{id: 222,content: '快递已达成都',ctime: '2017-1-10 17:59'},content: '快递已达四川',content: '快递已达武汉',content: '快递已达天津',content: '快递已达北京',content: '快递已打包',ctime: '2017-1-10 17:59'}];
        let items = [];
        invoice.map((el,index) => {
            let colorValue = index === 0 ? '#0b74c4' : '#888';
            let backgroundColor = index === 0 ? '#0b74c4' : '#e0e0e0';
            items.push(
                <View style={styles.expressItem} key={index}>
                    <View style={styles.expressRightFirst}>
                        <View style={styles.process}>
                            <Text style={{color:colorValue,fontSize:14}}>{el.content}</Text>
                            <Text style={{color:colorValue,fontSize:12}}>{el.ctime}</Text>
                        </View>
                    </View>
                    <View style={[styles.expressLeft,{backgroundColor:backgroundColor}]}/>
                </View>
            );
        });
        return (
            <View style={styles.content}>
                {items}
            </View>
        )
    }
}
const styles = {
    process: {
        paddingVertical: 10,flexDirection: 'column',borderBottomColor: '#e0e0e0',borderBottomWidth: 1,paddingRight: 20
    },expressRightFirst: {
        width: Dimensions.get('window').width,paddingLeft: 25,borderLeftWidth: 1,borderLeftColor: '#e0e0e0',flexDirection: 'column'
    },content: {
        marginLeft: 10,width: Dimensions.get('window').width,height: Dimensions.get('window').height,borderTopWidth: 1,borderTopColor: '#e0e0e0',marginTop: 10
    },expressItem: {
        flexDirection: 'row',justifyContent: 'flex-start',alignItems: 'flex-start',paddingLeft: 10,width: Dimensions.get('window').width
    },expressLeft: {
        width: 10,height: 10,borderRadius: 5,backgroundColor: '#e0e0e0',position: 'relative',right: Dimensions.get('window').width + 4,top: 20
    },}

3.要点

这里主要使用了position: ‘relative’,这里的relative跟css的有点不一样，css是相对父容器，这里是相对兄弟节点。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!