react-native-marquee-ab-copy
v1.0.0
Published
react-native marquee
Downloads
6
Readme
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