@tuya-oh/react-native-marquee-ab

模板版本：v0.2.2

react-native-marquee-ab

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息： @tuya-oh/react-native-marquee-ab Releases。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm i @tuya-oh/react-native-marquee-ab --save

yarn

yarn add @tuya-oh/react-native-marquee-ab

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import React, { Component } from 'react';
import {
    View,
    Text,
    Image,
    Dimensions,
} from 'react-native';
import { MarqueeHorizontal,MarqueeVertical } from 'react-native-marquee-ab';
export default class TestPage extends Component {
    render() {
        let mWidth = Dimensions.get('window').width;
        return (
            <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
                <View style={{ height: 50, backgroundColor: '#FFFFFF', width: '100%' }} />
                <MarqueeHorizontal
                    textList={[
                        { label: '1', value: 'item1:一闪一闪亮晶晶，满天都是小星星' },
                        { label: '2', value: 'item2:两只老虎跑的快' },
                        { label: '3', value: 'item3:蓝蓝的天上白云飘，白云下面小肥羊儿跑' },
                    ]}
                    speed={60}
                    width={mWidth}
                    height={50}
                    direction={'left'}
                    reverse={false}
                    bgContainerStyle={{ backgroundColor: '#FFFF00' }}
                    textStyle={{ fontSize: 16, color: '#FF0000' }}
                    onTextClick={(item) => {
                        alert('' + JSON.stringify(item));
                    }}
                />
            </View>
        )
    }
}

约束与限制

兼容性

本文档内容基于以下版本验证通过：

• RNOH: 0.72.29; SDK：HarmonyOS NEXT Developer Beta6; IDE：DevEco Studio 5.0.3.706; ROM：NEXT.0.0.65;
• RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

MarqueeHorizontal props

Name	Description	Type	Required	Platform	HarmonyOS Support
duration	执行完成整个动画所需要的时间(ms)不常用	number	yes	iOS/Android	yes
speed	平均的滚动速度，跑马灯使用这个属性（建议传入60）	number	no	iOS/Android	yes
textList	滚动的文字数组，具体数据格式请参照textList.item	array	yes	iOS/Android	yes
width	宽度，不能使用flex	number	yes	iOS/Android	yes
height	高度，不能使用flex	number	yes	iOS/Android	yes
direction	动画方向(向左向右滚动)left or right	string	yes	iOS/Android	yes
reverse	是否将整个文本数据倒叙显示	boolean	yes	iOS/Android	yes
separator	两个item之间的间隙	number	yes	iOS/Android	yes
bgContainerStyle	背景样式	object	no	iOS/Android	yes
textStyle	文本样式	object	no	iOS/Android	yes
onTextClick	点击事件回调	(item) => void	yes	iOS/Android	yes

MarqueeVertical props

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

textList.item props

Name	Description	Type	Required	Platform	HarmonyOS Support
label	用作点击事件的回调	string	yes	iOS/Android	yes
value	文本显示	string	yes	iOS/Android	yes
[object]	可随意添加数据供自己特殊需求使用	[object]	no	iOS/Android	yes

遗留问题

MarqueeHorizontal的reverse属性在HarmonyOS上会触发生效，而原库在Android/iOS上该属性已经失效。

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。