前端之家收集整理的这篇文章主要介绍了
一个 react-native 文字跑马灯组件,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
@H_301_1@一个 react-native 文字跑马灯组件。
@H_
301_1@如果你需要从下往上滚动的跑马灯,请使用
react-native-lahk-marquee-label-vertical.
@H_
301_1@
描述
@H_
301_1@我在一个项目中需要用到跑马灯,但是在网上没找到好用的。所以我就自己写了一个跑马灯的组件。
@H_
301_1@本来打算让它可以在 iOS 和 Android 平台上都好用的,不过还是在 iOS 平台上存在一个问题没法
解决。
@H_
301_1@我发现在 iOS 平台上,当使用
View
组件来包裹子组件的时候,如果没有
显示设置父级
View
组件的宽度(width 样式)(比如用
flex
布局),那么父级
View
组件的宽度会被
自动设置成子组件的宽度。(至少当子组件比父组件宽度大时是这样的,另外一种情况我没有做试验。)
@H_
301_1@我的跑马灯组件中的问题在于,我用了一个子级
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>
@H_
301_1@
因此要注意:
- @H_301_1@在 Android 平台上,通过
width
或者 flex
布局来设置最外层 View
的样式都没问题。
- @H_301_1@在 iOS 平台上,请使用并且只能使用
width
来设置样式。
安装
npm install --save react-native-lahk-marquee-label
使用
- @H_301_1@Import
import MarqueeLabel from 'react-native-lahk-marquee-label';
- @H_301_1@Use
<MarqueeLabel
duration={8000}
text={'This is a Marquee Label.'}
textStyle={{ fontSize: 13,color: 'white' }}
/>
@H_
301_1@or
<MarqueeLabel
speed={250}
textStyle={{ fontSize: 13,color: 'white' }}
>
This is a Marquee Label.
</MarqueeLabel>
Props
- @H_301_1@
children
: string,the text to show in the marquee. Alternative to text
.
- @H_301_1@
text
: string,the text to show in the marquee. Alternative to children
.
- @H_301_1@
duration
: number(unit: millisecond),the duration for the marquee to run one round. e.g. 6000 (for 6 seconds a round). Alternative to speed
.
- @H_301_1@
speed
: number(unit: px/s,px per second),the speed of the marquee. Alternative to duration
.
- @H_301_1@
bgViewStyle
: stylesheet object,background view component custom styles.
- @H_301_1@
textStyle
: stylesheet object,text component custom styles.
- @H_301_1@
textContainerWidth
: number,text container component width. If the text is not shown in one line,increase this value.
- @H_301_1@
textContainerHeight
: number,text container component height. If the text is not shown in one line,increase this value.
- @H_301_1@
textContainerStyle
: stylesheet object,not recommended to use,text containner component custom style.
原文链接:https://www.f2er.com/react/304247.html