问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

类似移动端的时间轴要怎么实现？

头像
KenOscar
    1k30299486

    1696902605022.png
    求类似的移动端的组件

    javascriptvue.js
    阅读 1.2k
    avatarAI BotBETA

    在移动端实现时间轴（Timeline）组件，可以参考以下方案：

    使用第三方库

    有许多第三方库可以帮助您快速实现时间轴组件，例如：

    • react-native-timeline：这是一个 React Native 组件，可以轻松实现时间轴的展示和交互。
    • react-native-elements：这个库中包含了许多 UI 组件，其中包括时间轴组件。
    • react-native-paper：这是一个基于 Material Design 的 React Native 库，其中也包含了一个时间轴组件。

    自定义组件

    如果您希望更深入地了解如何自定义时间轴组件，这里有一个简单的步骤：

    1. 创建组件文件：首先创建一个新的 React Native 组件文件，例如 Timeline.js。
    2. 设计样式：在该组件中，您可以定义时间轴的样式。例如，您可以使用 Flexbox 布局和内联样式来设计每个时间点的样式。以下是一个示例代码段：
    import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

const Timeline = ({ data }) => {
  return (
    <View style={styles.timelineContainer}>
      {data.map((item, index) => (
        <View key={index} style={styles.timelineItem}>
          <Text style={styles.timelineLabel}>{item.label}</Text>
          <Text style={styles.timelineValue}>{item.value}</Text>
        </View>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  timelineContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  timelineItem: {
    flex: 1,
    padding: 10,
  },
  timelineLabel: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  timelineValue: {
    fontSize: 12,
  },
});

export default Timeline;
    1. 传递数据：在您的主组件中，您可以将数据传递给 Timeline 组件。例如：
    import React from 'react';
import Timeline from './Timeline';

const App = () => {
  const data = [
    { label: '事件1', value: '2023-07-01' },
    { label: '事件2', value: '2023-07-05' },
    { label: '事件3', value: '2023-07-10' },
  ];

  return <Timeline data={data} />;
};
    1 个回答
    得票最新
    头像
    hfhan
      29k72241
      ✓ 已被采纳

      这个不复杂，不需要太多元素去构建，可以自己实现，参考下面代码
      https://jsrun.net/R2xKp/edit

      里面滑块指针我图省事直接用三角形代替了，你可以设置成一个字体、图片、或css去画五边形

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题