React-Native的时间轴的实现

时间轴是app开发中最常用的布局方式
做native开发，如果都用三方的组件，界面渲染层级会很深的，所以尽量自己实现。

布局分为左右布局，外加一个动态变化的TopView通过遮盖实现时间轴
右侧的底布局设置左边框宽度为1 key为BottomRightView
用带一个View 包裹字体图标 ●，View背景设置为白色，位置使用绝对布局 key为TopView
时间轴可分成三种状态，既时间轴点以上（up）和以下(down)，都显示（all）
最后一列的时间轴为 up, 第一列为 down ，中间的item为all

这是实现时间轴的核心代码

  renderItem = (section, row) => {
    const item = this.dataList[0].items[row] // 获取到绑定的数据源
    const paddingTop = row===0?30:0     // 第一列 给一个Padding 留白
    const itemHeight = this.renderItemHeight({section,row}) // 根据数据源计算本行的高度
    let timelineHeight = 10 // 时间轴线默认高度是10
    let timelineTop = 5 // 时间轴线的点两端的边距

    if(row===this.dataList[0].items.length-1){
      timelineHeight = itemHeight
    }
    
    if(row===0){
      timelineTop = 0
      timelineHeight +=5
    }

    return (
      <View style={[styles.horizontal_flex_flexstart_center,{paddingTop,alignItems:'flex-start',backgroundColor:colors.white}]} >
        <View 
          key ="BottomLeftView"
          style={{width:70,alignItems:'center'}} >
          <Text style={{fontSize:14,color:colors.textSubContent,fontWeight:'bold'}}>2019</Text>
          <Text style={{fontSize:14,color:colors.textSubContent}}>08/15</Text>
          <Text style={{fontSize:14,color:colors.ico7,marginVertical:5}}>2019</Text>
        </View>
        <TouchableOpacity
          key ="BottomRightView"
          style={{ width:width-70,paddingLeft:10,borderLeftColor:colors.border_color_dark,borderLeftWidth:1,height:itemHeight-paddingTop}}
          onPress={() => console.log(item.title)}
        >
          <Text             
            allowFontScaling
            numberOfLines={1} 
            style={{ width:width-100,fontSize: 17,color:colors.textContent,fontWeight:'bold',marginBottom:10}}>{item.title}</Text>
          {item.content&&<Text             
            allowFontScaling
            numberOfLines={2} 
            style={{ width:width-100,fontSize: 13,color:colors.textContent,marginBottom:10,lineHeight:20}}>{item.content}</Text>}
            <Image
              style={{ width:width-100, height: 120,justifyContent:'flex-start',alignItems:'flex-start' }}
              source={{
                  uri: item.imageUrl,
                }}
                resizeMode='stretch'
              />
        </TouchableOpacity>
        <View  
          key ="TopView" // 遮住BottomRightView边距，实现时间轴的动态变化
          style={{
            width:4,
            position:'absolute',
            alignItems:'center',
            paddingTop:timelineTop===0?8:3,
            top:timelineTop+paddingTop,
            left:69,
            backgroundColor:colors.white,
            height:timelineHeight
          }}>
          <Icon
              name='DVIcon|cycle'
              size={4}
              color={colors.textContent}
            />
        </View>
      </View>
      
    )
  }

效果如图

image.png

代码可查看TimeLineList

最后编辑于：2019.10.17 15:52:07