一個 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.