推荐使用:react-native-marquee — 轻松实现React Native滚动文本组件
import React from 'react';
import { View, Text } from 'react-native';
import MarqueeText from 'react-native-marquee'; // 引入MarqueeText组件
const App = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<MarqueeText
style={{ fontSize: 18 }}
duration={20000}
scrollDelay={500}
repeatSpacing={1000}
leading={1000}
trailing={400}
>
这是一条滚动的文本信息,可以用于新闻滚动、导航栏标题滚动等场景。
</MarqueeText>
</View>
);
};
export default App;
这段代码展示了如何在React Native应用中使用react-native-marquee
组件来创建一个滚动的文本。通过调整duration
, scrollDelay
, repeatSpacing
, leading
, 和 trailing
属性,可以控制文本的滚动速度和行为。
评论已关闭