React Native 长文本实现横向自动滚动的最优方案是什么

针对React Native场景，优先推荐两种实现方式，可根据需求复杂度选择：

方案1：纯原生组件实现（无第三方依赖，轻量需求首选） #

直接用ScrollView包裹Text组件，配置自动滚动逻辑即可，核心实现代码如下：

import { useEffect, useRef, useState } from 'react';
import { View, Text, ScrollView, Animated } from 'react-native';

const AutoScrollTitle = (props) => {
  const scrollAnimRef = useRef(new Animated.Value(0));
  const textWidth = useRef(0);
  const containerWidth = 290; // 对应你原来设置的maxWidth
  const [isOverflow, setIsOverflow] = useState(false);

  useEffect(() => {
    // 仅当文本宽度大于容器宽度时触发滚动逻辑
    if (textWidth.current > containerWidth) {
      setIsOverflow(true);
      // 循环滚动动画
      const loopAnim = Animated.loop(
        Animated.sequence([
          Animated.delay(1000), // 文本展示1秒后再开始滚动
          Animated.timing(scrollAnimRef.current, {
            toValue: -(textWidth.current - containerWidth),
            duration: textWidth.current * 30, // 可自行调整数值控制滚动速度
            useNativeDriver: true,
          }),
          Animated.delay(1000), // 滚动到末尾后停留1秒再回弹
          Animated.timing(scrollAnimRef.current, {
            toValue: 0,
            duration: textWidth.current * 30,
            useNativeDriver: true,
          })
        ])
      );
      loopAnim.start();
      return () => loopAnim.stop();
    }
  }, [props.item.name]);

  return (
    <View style={{flex: 1, width: containerWidth, overflow: 'hidden'}}>
      <Animated.View style={{transform: [{translateX: scrollAnimRef.current}]}}>
        <Text
          style={{
            fontFamily: boldFont,
            fontSize: 15,
            color: theme.primaryTextColor,
          }}
          onLayout={(e) => textWidth.current = e.nativeEvent.layout.width}
        >
          {props.item.name}
        </Text>
      </Animated.View>
    </View>
  );
};

该方案无需引入额外依赖，可灵活自定义滚动速度、停留时长、回弹逻辑等参数，适配所有React Native版本。

方案2：成熟组件实现（复杂交互需求首选） #

如果需要开箱即用的能力，比如自动判断文本溢出才触发滚动、循环跑马灯、触摸暂停等特性，可直接使用社区成熟的跑马灯组件，核心调用代码如下：

import MarqueeText from 'react-native-marquee';

// 直接替换原有Text组件即可
<View style={{flex: 1}}>
  <MarqueeText
    style={{
      fontFamily: boldFont,
      fontSize: 15,
      color: theme.primaryTextColor,
      maxWidth: 290,
    }}
    duration={3000}
    delay={1000}
    marqueeOnStart={true}
    loop={true}
  >
    {props.item.name}
  </MarqueeText>
</View>

该方案无需自行实现动画逻辑，边缘场景适配完善，开发效率更高。

选择建议 #

如果仅需要基础的滚动展示能力，优先选方案1，避免引入额外依赖增大包体积；如果需要丰富的交互能力，方案2投入成本更低。

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