A react-native marquee(vertical) label component.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
LICENSE
README.md
index.js
package.json

README.md

react-native-lahk-marquee-label-vertical

A react-native marquee(vertical) label component.

npm version

Anchors

  1. Desc
  2. Install
  3. Usage
  4. Props
  5. Update Log
  6. 中文介绍

Desc

Skip this part, go to #Install

This is a vertical marquee label.

If you need a horizontal one, please use react-native-lahk-marquee-label.

Please refer to react-native-lahk-marquee-label for more detailed descrition.

Note:

  • In Andorid, you can use both width or flex to layout the view.
  • In iOS, use width to layout the view. flex layout is not supported.

Install

npm install --save react-native-lahk-marquee-label-vertical

Usage

  1. Import
import MarqueeLabelVertical from 'react-native-lahk-marquee-label-vertical';
  1. Use
<MarqueeLabelVertical
  duration={8000}
  text={'This is a Marquee Label.'}
  textStyle={{ fontSize: 13, color: 'white' }}
/>

or

<MarqueeLabelVertical
  speed={250}
  textStyle={{ fontSize: 13, color: 'white' }}
>
  This is a Marquee Label.
</MarqueeLabelVertical>

Props

  • children: string, the text to show in the marquee. Alternative to text.
  • text: string, the text to show in the marquee. Alternative to children.
  • duration: number(unit: millisecond), the duration for the marquee to run one round. e.g. 6000 (for 6 seconds a round). Alternative to speed.
  • speed: number(unit: px/s, px per second), the speed of the marquee. Alternative to duration.
  • bgViewStyle: stylesheet object, background view component custom styles.
  • textStyle: stylesheet object, text component custom styles.

Update Log

2017.08.21 Version 1.1.0

  • Dynamic Text Support: now you can use dynamic text with this component :D

中文介绍

跳转到 #install

这是一个从下向上滚动的跑马灯。

如果需要从右往左滚动的跑马灯,请使用 react-native-lahk-marquee-label

更多详细介绍,请查看 react-native-lahk-marquee-label

要注意:

  • 在 Android 平台上,通过 width 或者 flex 布局来设置最外层 View 的样式都没问题。
  • 在 iOS 平台上,请使用并且只能使用 width 来设置样式。