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'},
            {id: 222, content: '快遞已達四川',ctime: '2017-1-10 17:59'},
            {id: 222, content: '快遞已達武漢',ctime: '2017-1-10 17:59'},
            {id: 222, content: '快遞已達天津',ctime: '2017-1-10 17:59'},
            {id: 222, content: '快遞已達北京',ctime: '2017-1-10 17:59'
 
},
            {id: 222, 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,
        flexDirection: 'column',
        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是相對父容器，這裡是相對兄弟節點。