uiwjs · jaywcjlove · Aug 6, 2021 · Aug 3, 2021 · Aug 5, 2021 · Aug 5, 2021
diff --git a/example/examples/src/routes.tsx b/example/examples/src/routes.tsx
@@ -283,4 +283,12 @@ export const stackPageData: Routes[] = [
       description: '步骤条',
     },
   },
+  {
+    name: 'Timeline',
+    component: require('./routes/Timeline').default,
+    params: {
+      title: 'Timeline 时间轴',
+      description: '时间轴',
+    },
+  },
 ];
diff --git a/example/examples/src/routes/Timeline/index.tsx b/example/examples/src/routes/Timeline/index.tsx
@@ -0,0 +1,51 @@
+import React, {Component, useState} from 'react';
+import {View, Text} from 'react-native';
+import {ComProps} from '../../routes';
+import Layout, {Container} from '../../Layout';
+import {Timeline, WingBlank } from '@uiw/react-native';
+
+const {Header, Body, Card} = Layout;
+
+interface StepsViewProps extends ComProps {}
+
+export default (props: StepsViewProps) => {
+  const { route } = props;
+
+  const item = [
+    { 
+      'title': '声明式声明式声明式声明式声明式声明式声明式声明式声明式', 
+      'tips': '2021-08-07 12:00:00',
+      'desc': 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。'
+    },
+    {
+      'title': '组件化',
+      'color': 'yellow',
+      'desc': '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。'
+    },
+    {
+      'title': '一次学习，随处编写', 
+      'color': 'red',
+      'desc': [
+        '无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
+        'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。'
+      ]
+    }
+  ]
+
+  return (
+    <Container>
+      <Header title={route.params.title} description={route.params.description} />
+      <Body>
+        <Card title="基础用法">
+          <WingBlank>
+            <Timeline
+              style={{ backgroundColor: '#fff' }}
+              isReverse
+              items={item}
+            />
+          </WingBlank>
+        </Card>
+      </Body>
+    </Container>
+  )
+}
diff --git a/packages/core/src/Timeline/README.md b/packages/core/src/Timeline/README.md
@@ -0,0 +1,56 @@
+Timeline 时间轴
+---
+
+垂直展示一系列的时间流信息。
+
+### 基础示例
+
+```jsx
+import { Steps } from '@uiw/react-native';
+
+function Demo() {
+  return (
+    <Timeline
+      style={{ backgroundColor: '#fff' }}
+      isReverse
+      items={[
+        { 
+          'title': '声明式声明式声明式声明式声明式声明式声明式声明式声明式', 
+          'tips': '2021-08-07 12:00:00',
+          'desc': 'React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。'
+        },
+        {
+          'title': '组件化',
+          'color': 'yellow',
+          'desc': '构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。'
+        },
+        {
+          'title': '一次学习，随处编写', 
+          'color': 'red',
+          'desc': [
+            '无论你现在使用什么技术栈，在无需重写现有代码的前提下，通过引入 React 来开发新功能。',
+            'React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。'
+          ]
+        }
+      ]}
+    />
+  );
+}
+```
+
+### props
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `items`           |步骤条数据列表      | Item[] | - |
+| `isReverse`        | 是否倒序  | Boolean | false |
+
+
+### Item[]
+
+| 参数                 | 说明         | 类型    | 默认值  |
+| -------------------- | ------------ | ------- | ------- |
+| `title`           |标题      | Item[] | - |
+| `tips`           |子标题       | String | - |
+| `desc`            | 子项内容  | String  / string[] | - |
+| `color`           | 标示颜色 | String  | - |
diff --git a/packages/core/src/Timeline/index.tsx b/packages/core/src/Timeline/index.tsx
@@ -0,0 +1,121 @@
+
+import React, { useState, useEffect } from 'react';
+import {View, Text, StyleSheet, ViewProps} from 'react-native';
+
+export interface TimelineItemsProps {
+  title: string;
+  tips?: string;
+  color?: string;
+  desc?: string | string[]; 
+}
+
+export interface TimelineProps extends ViewProps {
+  isReverse?: boolean;
+  items: TimelineItemsProps[];
+}
+
+const Desc = (desc?: string | string[]) => {
+  let isArray = Array.isArray(desc);
+  if (isArray) {
+    const descs: string[] = desc as string[];
+     return (
+       <View>
+         {descs.map((item, index) => (
+           <Text style={styles.desc} key={index}>{item}</Text>
+         ))}
+       </View>
+     )
+  } else {
+    return <Text style={styles.desc}>{desc}</Text>
+  }
+}
+
+export default (props: TimelineProps) => {
+  const {
+    items = [],
+    isReverse,
+    style
+  } = props;
+
+  const [lineItem, setLineItem] = useState<TimelineItemsProps[]>([]);
+
+  useEffect(() => {
+    if (isReverse && items.length > 0) {
+      const item = items.reverse();
+      setLineItem(item);
+    } else {
+      setLineItem(items);
+    }
+  }, [isReverse, items])
+
+  return (
+    <View style={[styles.timeline, style]}>
+      {lineItem.map((item, index) => {
+        return (
+          <View style={[styles.item]} key={index}>
+            {index < items.length - 1 && <View style={styles.line}></View>}
+            <View style={[styles.circular, {
+              backgroundColor: item.color || '#e4e7ed'
+            }]}></View>
+            <View style={styles.wrapper}>
+              <View style={styles.top}>
+                <Text style={styles.title}>{item.title}</Text>
+              </View>
+              {item.tips && <Text style={styles.tips}>{item.tips}</Text>}
+              {item.desc && Desc(item.desc)}
+            </View>
+          </View>
+        )
+      })}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  timeline: {
+    paddingTop: 20,
+    paddingLeft: 15,
+    paddingRight: 15,
+  },
+  item: {
+    position: 'relative',
+    paddingBottom: 20,
+    top: 0
+  },
+  circular: {
+    position: 'absolute',
+    left: 0,
+    top: 3,
+    width: 14,
+    height: 14,
+    borderRadius: 16
+  },
+  line: {
+    position: 'absolute',
+    left: 6,
+    top: 17,
+    bottom: -3,
+    width: 1,
+    backgroundColor: '#e4e7ed'
+  },
+  wrapper: {
+    paddingLeft: 30
+  },
+  top: {
+
+  },
+  tips: {
+    color: '#666',
+    marginTop: 8
+  },
+  title: {
+    fontSize: 15,
+    lineHeight: 20
+  },
+  desc: {
+    color: '#5e6d82',
+    fontSize: 14,
+    marginTop: 10,
+    lineHeight: 20
+  }
+})
diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx
@@ -62,6 +62,8 @@ export { default as ExpandableSection } from './ExpandableSection';
 export * from './ExpandableSection';
 export { default as Steps } from './Steps';
 export * from './Steps';
+export { default as Timeline } from './Timeline';
+export * from './Timeline';
 
 /**
  * Typography