react-native-marquee-ab-copy

react-native-marquee-ab

从 https://github.com/ZhangTaoK/react-native-marquee-ab 处拷贝

ReactNative Marquee，Support iOS and Android。

使用了 react-native 中的 Animated API，且只使用了 react-native&js 代码，实现 Marquee(走马灯)组件。

支持的功能

v2.0.0-rc.1 新增：

• 增加水平滚动时首尾相连的功能。
• 增加水平滚动的 Swiper 模式。
• 修改水平滚动模式，更换为 Animated.loop 方法，使首尾相连的不间断滚动更加丝滑。
• 更多功能正在开发中...

上一版本(v1.2.6历史文档)：

• 支持文本的水平滚动（向左、向右）
• 支持文本的竖直滚动（向上、向下）
• 支持多条文本数据
• 支持每一条文本数据的点击事件
• 支持自定义滚动速度
• 支持自定义样式
• 支持竖直滚动在头部添加自定义 view

其他请阅读本组件支持的 Api

事例演示

Version 2.0.0-rc.1

！！！暂无新版本演示！！！ 新版本暂未上传 npm，所以新版仅供在 github 交流，待完善功能修复 bug 后，再进行更新。目前根目录的 MarqueeHorizontal 和 MarqueeVertical 还是 1.2.6 版本的，最新版本的代码请直接点击这里进行阅读交流。

Version 1.2.6

Install

npm

npm i react-native-marquee-ab --save

（目前 npm 安装的版本依旧是 1.2.6，待 2.0.0 版本功能完善修复 bug 后，再进行更新）

Props v1.2.6

本组件支持以下 Api，如需要新的 Api 欢迎提出新的 issues

MarqueeHorizontal props

prop	type	default	required	description
duration	number	10000ms	yes	执行完成整个动画所需要的时间(ms)不常用
speed	number	0	no	平均的滚动速度，跑马灯使用这个属性（建议传入 60）
textList	array	[]	yes	滚动的文字数组，具体数据格式请参照 textList.item
width	number	375	yes	宽度，不能使用 flex
height	number	50	yes	高度，不能使用 flex
direction	string	left	yes	动画方向(向左向右滚动)left or right
reverse	bool	false	yes	是否将整个文本数据倒叙显示
separator	number	20	yes	两个 item 之间的间隙
bgContainerStyle	object		no	背景样式
textStyle	object		no	文本样式
onTextClick	func		yes	点击事件回调：(item) => void

MarqueeVertical props

prop	type	default	required	description
duration	number	600	yes	执行整个动画的完成时间(ms)
textList	array	[]	yes	滚动的文字数组，具体数据格式请参照 textList.item
width	number	375	no	宽度，不能使用 flex
height	number	50	no	高度，不能使用 flex
delay	number	12000	yes	文本停顿时间(ms)
direction	string	up	yes	动画方向(向上向下滚动)up or down
numberOfLines	number	1	yes	同一个数据的文本行数
headViews	array	[]	no	在文本最前面加上一个自定义 view，效果如图例所示，用法请参照事例用法，length 长度与 textList 必须一致
viewStyle	object		yes	每一行文本的样式
bgContainerStyle	object		no	背景样式
textStyle	object		no	文本样式
onTextClick	func		yes	点击事件回调：(item) => void

textList.item props

prop	type	default	required	description
label	string		yes	用作点击事件的回调
value	string		yes	文本显示
[object]	[object]		no	可随意添加数据供自己特殊需求使用

事例数据

[{label : 1,value : '小肥羊'},...]

Usage

1.import

import { MarqueeHorizontal,MarqueeVertical } from 'react-native-marquee-ab';

2.Use

详细事例代码：

https://github.com/ZhangTaoK/react-native-marquee-ab/blob/master/old/1.2.6/TestPage.js

注意事项：

由于宽度只能使用数值所以如果想要宽度满屏的话需要这样使用，这样获取到宽度再赋值给 width 就可以了

import { Dimensions } from 'react-native';

...
 mWidth = Dimensions.get('window').width;  //整个屏幕的宽度
...

博客地址：https://blog.csdn.net/sinat_30949835/article/details/87919455

Historical version：

v2.0.0-rc.1 (测试版本 最新 未上传 npm)

• 增加水平滚动时首尾相连的功能。
• 增加水平滚动的 Swiper 模式。
• 修改水平滚动模式，更换为 Animated.loop 方法，使首尾相连的不间断滚动更加丝滑。

源码路径：更新的代码暂未放到根目录，阅读交流请前往测试文件夹https://github.com/ZhangTaoK/react-native-marquee-ab/tree/master/example/src/marquee

v1.2.6 （推荐）

• 新增竖直滚动的 header 样式
  历史文档：https://github.com/ZhangTaoK/react-native-marquee-ab/blob/master/OLDREADME.md
  使用教程：https://blog.csdn.net/sinat_30949835/article/details/87919455

v1.2.5

• 修改默认样式

捐赠

您的一份鼓励与支持，就是作者最大的动力。
国内捐赠地址

捐赠列表

感谢！

• kt_xlb