模板版本：v0.2.2

[!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>
        )
    }
}

约束与限制

兼容性

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

1. RNOH: 0.72.29; SDK：HarmonyOS NEXT Developer Beta6; IDE：DevEco Studio 5.0.3.706; ROM：NEXT.0.0.65;
2. 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) ，请自由地享受和参与开源。