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'},{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 实现物流进度信息相关推荐

React native大版本迭代信息记录
记录react native,版本迭代中的重大变化 v0.60.x 1.AndroidX支持 2.精益核心减除(WebView和NetInfo之前被提取到单独的存储库中)(react-native-w ...
reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法.主要用到的方法有: 这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了 ...
React Native (一) react-native-video实现音乐播放器和进度条的功能
React Native (一) react-native-video实现音乐播放器和进度条的功能功能: 1.卡片滑动切歌 2.显示进度条效果图: 第三方组件: 1.react-native-vi ...
前端学习（2028）vue之电商管理系统电商系统之展示物流进度
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
React Native常用第三方汇总
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-navigation github : https://reactnavig ...
【React Native开发】React Native控件之RefreshControl组件具体解释(21)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50672747 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
React Native 热更新方案
转载: https://blog.csdn.net/xiangzhihong8/article/details/73201421 随着 React Native 的不断发展完善,越来越多的公司选择使用 ...
基于 React Native 的 58 同城 App 开发实践
作者简介: 彭飞,58 同城 iOS 客户端架构师.专注于新技术的研发,主要负责 App 端组件化架构以及性能优化,并已推广 React Native 在 58 同城 App 中业务场景的应用.在 M ...

React Native 实现物流进度信息

React Native 实现物流进度信息相关推荐

最新文章

热门文章