反应原生垂直时间线组件 [英] React native vertical timeline component

问题描述

我想在 React Native 中创建一个垂直时间线(如下所示)，但找不到合适的库.有人可以推荐一个库，或者如果它不太棘手，可以指导如何在没有库的情况下完成.

I want to create a vertical timeline(as shown below) in react native but am unable to find a decent library.Can someone suggest a library or if it's not too tricky can guide through how to accomplish without a library.

推荐答案

您可以在常规 ListView 中实现此功能.在每一行，在左边放一个固定宽度的视图来绘制点和线.在该视图内，添加一个点，它是一个角半径等于一半大小的视图(在两个方向上居中).线是另一个视图(绝对定位).请参阅下面的代码和屏幕截图.您可以将其包装到 TimeLineListView 组件中.它将具有与 ListView 相同的界面，但从 renderRow 返回的内容被插入到 content 视图中(以替换 text).

You can implement this in a regular ListView. In each row, put a view with fixed width on the left to draw the dot and line. Inside that view, add a dot which is a view with corner radius equal to half the size (centered in both directions). Line is another view (absolute positioned). See code and screenshot below. You can wrap this into a TimeLineListView component. It will have the same interface as ListView, but content return from renderRow gets inserted into content view (to replace text).

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
} from 'react-native';

export default class timeline extends Component {
  constructor() {
    super();

    this.renderRow = this.renderRow.bind(this);

    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'row 1',
        'row 2',
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut venenatis felis. Donec at tempus neque. Morbi vitae sem et nisi porta ornare. Cras at venenatis tellus. Curabitur consequat lacinia lacus, et luctus tortor dignissim nec. Suspendisse scelerisque aliquet vehicula. Integer at ante elit.',
        'Suspendisse potenti. Proin varius risus ac venenatis elementum. Morbi fringilla ante et nibh accumsan, ultricies tempor est porta. Nunc molestie neque a efficitur posuere. Nunc egestas, massa vitae hendrerit feugiat, ligula sem ullamcorper ante, quis ultricies quam turpis ac lectus. Praesent luctus, sapien imperdiet sagittis iaculis, nibh lacus convallis velit, sed placerat enim justo ornare tortor. Phasellus sed dui id odio lobortis imperdiet. Duis sollicitudin tellus sed eros commodo ultrices. Donec auctor nunc id quam suscipit, tempus tincidunt elit placerat. Sed nec odio vel ligula maximus varius. Nullam vulputate augue non gravida lacinia. Nam ac lobortis libero, id sollicitudin nulla.']),
    };
  }

  renderRow(rowData, section, row) {
    const total = this.state.dataSource.getRowCount();
    const topLineStyle = row == 0 ? [styles.topLine, styles.hiddenLine] : styles.topLine;
    const bottomLineStyle = row == total - 1 ? [styles.bottomLine, styles.hiddenLine] : styles.bottomLine;

    return (
      <View style={styles.row}>
        <View style={styles.timeline}>
          <View style={styles.line}>
            <View style={topLineStyle} />
            <View style={bottomLineStyle} />
          </View>
          <View style={styles.dot} />
        </View>
        <View style={styles.content}>
          <Text>{rowData}</Text>
        </View>
      </View>
    );
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView style={styles.listView}
          dataSource={this.state.dataSource}
          renderRow={this.renderRow}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  listView: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  row: {
    padding: 4,
    paddingLeft: 0,
  },
  content: {
    marginLeft: 40,
  },
  timeline: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    width: 40,
    justifyContent: 'center', // center the dot
    alignItems: 'center',
  },
  line: {
    position: 'absolute',
    top: 0,
    left: 18,
    width: 4,
    bottom: 0,
  },
  topLine: {
    flex: 1,
    width: 4,
    backgroundColor: 'black',
  },
  bottomLine: {
    flex: 1,
    width: 4,
    backgroundColor: 'black',
  },
  hiddenLine: {
    width: 0,
  },
  dot: {
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: 'black',
  },
});

AppRegistry.registerComponent('timeline', () => timeline);

这篇关于反应原生垂直时间线组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！