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是相對父容器，這里是相對兄弟節點。

總結

以上是生活随笔為你收集整理的React Native 实现物流进度信息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。