如何在React Native中实现滚动文本条效果？求相关库或代码片段

一、原生CSS + JavaScript 代码片段 #

无需依赖第三方库，直接通过CSS动画结合JS控制就能实现类似效果：

HTML结构

<div class="text-scroll-box">
  <span class="scroll-content"></span>
  <span class="blink-cursor">|</span>
</div>

CSS样式

.text-scroll-box {
  width: 220px;
  padding: 10px 15px;
  border: 1px solid #222;
  overflow: hidden;
  white-space: nowrap;
  font-family: monospace;
}

.scroll-content {
  display: inline-block;
  /* 控制滚动速度，数值越大越慢 */
  animation: text-scroll 7s linear infinite;
}

.blink-cursor {
  animation: cursor-blink 1s step-end infinite;
  color: #222;
}

/* 文本滚动动画 */
@keyframes text-scroll {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 光标闪烁动画 */
@keyframes cursor-blink {
  from, to {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

JavaScript动态切换文本（可选）

const contentEl = document.querySelector('.scroll-content');
const textList = ['滚动文本演示效果', '自定义你的文本内容', '支持多轮循环切换'];
let currentIdx = 0;

// 每7秒切换一次文本，和动画时长对应
setInterval(() => {
  contentEl.textContent = textList[currentIdx];
  currentIdx = (currentIdx + 1) % textList.length;
}, 7000);

二、可用第三方库 #

• Marquee.js：轻量的跑马灯专用库，支持自定义滚动方向、速度、暂停触发等，适配多种场景
• Typed.js：主打打字机动画，配合CSS滚动效果可实现更细腻的文本展示逻辑
• Animate.css：内置多种预定义动画类，包含滚动相关效果，能快速集成到元素上

内容的提问来源于stack exchange，提问作者FaysalB