一个 react-native 文字跑马灯组件。
描述
我在一个项目中需要用到跑马灯,但是在网上没找到好用的。所以我就自己写了一个跑马灯的组件。
本来打算让它可以在 iOS 和 Android 平台上都好用的,不过还是在 iOS 平台上存在一个问题没法解决。
我发现在 iOS 平台上,当使用 View 组件来包裹子组件的时候,如果没有显示设置父级 View 组件的宽度(width 样式)(比如用 flex 布局),那么父级 View 组件的宽度会被自动设置成子组件的宽度。(至少当子组件比父组件宽度大时是这样的,另外一种情况我没有做试验。)
我的跑马灯组件中的问题在于,我用了一个子级 View 组件来包裹 Text 组件以保证文字是在一行全部显示。通过将 text container 的宽度设置得比 Text 组件宽度大,保证了文字不会换行,也不会用省略号替换溢出文字。 text container 默认宽度为 1000,这比一般的跑马灯标签实际宽度要大。而这也就导致了上述的问题,最外层的 View 的宽度也变成了 1000。
{text}
因此要注意:
在 Android 平台上,通过 width 或者 flex 布局来设置最外层 View 的样式都没问题。
在 iOS 平台上,请使用并且只能使用 width 来设置样式。
安装
npm install --save react-native-lahk-marquee-label
使用
Import
import MarqueeLabel from 'react-native-lahk-marquee-label';
Use
duration={8000}
text={'This is a Marquee Label.'}
textStyle={{ fontSize: 13, color: 'white' }}
/>
or
speed={250}
textStyle={{ fontSize: 13, color: 'white' }}
>
This is a Marquee Label.
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.