前端开发人员经常需要在移动应用程序上显示时间轴。现在，有了 npm 包 react-native-horizontal-timeline，我们可以很容易地在 React Native 应用中实现水平时间轴。
安装
首先，我们需要在项目中安装 react-native-horizontal-timeline，运行以下命令：
npm install --save react-native-horizontal-timeline
使用方法
在你的 React Native 应用中，导入 react-native-horizontal-timeline 组件，将其包裹在一个 ScrollView 中，并传入一些数据来显示时间轴。以下是一个简单的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ----- ---------- - ---- ---------------
------ -------- ---- -----------------------------------
----- ---- - -
-
----- ---- ------
------ --- ----- -----
------------ -- ------- -- ------ -- - --- -----------
--
-
----- ---- ------
------ ---- ----------
------------ -- --- -------- -- - ------ --- -----------
--
-
----- ---- ------
------ -------- -------------
------------ -- ------- -- ----- ----------- -- -- ----- -------
----- -------------------------------
-
--
----- --- - -- -- -
------ -
------------
----- -------------------------
----- ------------------------ ------ ---------------
--------- ----------- --
-------
-------------
--
--
----- ------ - -------------------
---------- -
------- --
--
------- -
--------- ---
----------- -------
------------- --
-
---
------ ------- ----控制样式
我们可以通过传递 style 属性来修改时间轴的样式。
<Timeline data={data} style={{ marginTop: 20 }} />还可以通过设置 innerCircle 和 outerCircle 属性来显示/隐藏时间轴上的圆形。
<Timeline data={data} innerCircle outerCircle />自定义卡片内容和样式
要自定义卡片中的内容和样式，我们可以使用 renderDetail 属性，并传递自定义函数。该函数接收当前卡片的数据作为参数，并返回一个 React 元素。
-- -------------------- ---- -------
----- ------------ - ------ -- -
------ -
----- -------- -------- -- ---
----- -------- --------- --- ----------- ------- ------------- -- ---
------------
-------
----- -------- --------- --- ------------- -- ---
------------------
-------
----- -------- -------------- ------ ----------- -------- ---
---------- -- -
------ ------------------ -------- ------ --- ------- --- ------------ -- -- --
--
----- -------- --------- -- ---------------------
-------
-------
--
--
-- ---
--------- ----------- --------------------------- --总结
react-native-horizontal-timeline 是一个很有用的 npm 包，它可以帮助我们轻松地在 React Native 应用上实现水平时间轴。我们可以通过控制样式和自定义卡片内容和样式来满足特定的需求。希望这篇教程对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d092702382262c