React Native Marquee Ab Save

react-native 水平/竖直滚动跑马灯。支持多个text数据,支持点击事件回调,自定义宽度、样式。

Project README

react-native-marquee-ab

npm npm npm npm

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

image

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 (推荐)
v1.2.5
  • 修改默认样式

捐赠

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

捐赠列表

感谢!

  • kt_xlb
Open Source Agenda is not affiliated with "React Native Marquee Ab" Project. README Source: ZhangTaoK/react-native-marquee-ab
Stars
146
Open Issues
18
Last Commit
3 months ago

Open Source Agenda Badge

Open Source Agenda Rating