一个 react-native 文字跑马灯组件

一个 react-native 文字跑马灯组件。

若是你须要从下往上滚动的跑马灯, 请使用 react-native-lahk-marquee-label-vertical.

描述

我在一个项目中须要用到跑马灯，可是在网上没找到好用的。因此我就本身写了一个跑马灯的组件。

原本打算让它能够在 iOS 和 Android 平台上都好用的，不过仍是在 iOS 平台上存在一个问题无法解决。

我发如今 iOS 平台上，当使用 View 组件来包裹子组件的时候，若是没有显示设置父级 View 组件的宽度（width 样式）（好比用 flex 布局），那么父级 View 组件的宽度会被自动设置成子组件的宽度。（至少当子组件比父组件宽度大时是这样的，另一种状况我没有作试验。）

个人跑马灯组件中的问题在于，我用了一个子级 View 组件来包裹 Text 组件以保证文字是在一行所有显示。经过将 text container 的宽度设置得比 Text 组件宽度大，保证了文字不会换行，也不会用省略号替换溢出文字。 text container 默认宽度为 1000，这比通常的跑马灯标签实际宽度要大。而这也就致使了上述的问题，最外层的 View 的宽度也变成了 1000。

<View class="marquee-label">
  <View class="marquee-label-text-container">
    <Text class="marquee-label-text">{text}</Text>
  </View>
</View>

所以要注意：

• 在 Android 平台上，经过 width 或者 flex 布局来设置最外层 View 的样式都没问题。

• 在 iOS 平台上，请使用而且只能使用 width 来设置样式。

安装

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

使用

1. Import

import MarqueeLabel from 'react-native-lahk-marquee-label';

1. Use

<MarqueeLabel
  duration={8000}
  text={'This is a Marquee Label.'}
  textStyle={{ fontSize: 13, color: 'white' }}
/>

or

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

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.

• textContainerWidth: number, text container component width. If the text is not shown in one line, increase this value.

• textContainerHeight: number, text container component height. If the text is not shown in one line, increase this value.

• textContainerStyle: stylesheet object, not recommended to use, text containner component custom style.