Skip to content

Latest commit

 

History

History
144 lines (112 loc) · 7.87 KB

react-native-marquee-ab.md

File metadata and controls

144 lines (112 loc) · 7.87 KB

模板版本：v0.2.2

react-native-marquee-ab

Supported platforms License

[!TIP] Github 地址

安装与使用

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

npm

npm install --save react-native-marquee-ab@1.2.6

yarn

yarn add react-native-marquee-ab@1.2.6

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

[!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上只有第一次修改会触发生效，而原库在iOS上该属性已经失效。未实现HarmonyOS化 问题issue#58

其他

开源协议

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