当前位置：首页 > news >正文

项目集成 Chrono 时间轴

news 2025/8/22 6:31:44

1. 安装 Node.js

首先，确保你已经安装了 Node.js。你可以通过在终端运行以下命令来检查是否已安装：

node -v

在这里插入图片描述

如果没有安装，下载并安装最新版本的 Node.js。

2. 使用 Vite 创建react项目

打开终端或命令行工具，运行以下命令来初始化一个新的 Vite 项目。

npm create vite@latest my-vite-project

这将启动一个交互式向导，允许你选择项目的框架（如 React、Vue、Svelte 等）。
在这里插入图片描述

3. 开发chrono时间轴

在这里插入图片描述
首先，安装项目依赖：

npm install

然后，使用以下命令安装 chrono-node 库：

npm install chrono-node

接下来，在 src/components 目录下创建 Timeline.tsx 文件，并编写以下代码：

//import React from 'react';
import { Chrono } from 'react-chrono';const App = () => {const items = [{title: 'May 1940',cardTitle: 'Dunkirk',url: 'http://www.history.com',cardSubtitle:'Men of the British Expeditionary Force (BEF) wade out to a destroyer...',cardDetailedText:'Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.',media: {type: 'IMAGE',source: {url: 'http://someurl/image.jpg',},},},// ... more items];return (<div style={{ width: '800px', height: '400px' }}><Chrono items={items} /></div>);
};export default App;

为了解决 react-chrono 报错的问题，在 src 下创建 react-chrono.d.ts 文件：

// src/react-chrono.d.ts 或者项目根目录下的 react-chrono.d.ts 文件
declare module 'react-chrono';

接着，在 src/App.tsx 中引入 Timeline.tsx 组件：

//import React from 'react';
import { Chrono } from 'react-chrono';const App = () => {const items = [{title: 'May 1940',cardTitle: 'Dunkirk',url: 'http://www.history.com',cardSubtitle:'Men of the British Expeditionary Force (BEF) wade out to a destroyer...',cardDetailedText:'Men of the British Expeditionary Force (BEF) wade out to a destroyer during the evacuation from Dunkirk.',media: {type: 'IMAGE',source: {url: 'http://someurl/image.jpg',},},},// ... more items];return (<div className="App"><Chronoitems={items}  // 渲染从 API 获取的时间轴数据mode="VERTICAL"cardWidth={650}mediaHeight={300}scrollable={true}mediaSettings={{align: 'center',imageFit: 'contain',}}/></div>);
};export default App;

启动项目：