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是相对父容器,这里是相对兄弟节点。