React Native 带时长控制的文本背景动态高亮动画实现求助

核心思路：抛弃逐字符切割文本触发重渲染的方案，改用双文本重叠+动画裁剪的方案实现流畅的高亮效果，无需频繁修改组件状态，性能远高于字符串切割方案。 #

实现步骤 #

• 准备两个内容完全一致的<Text>组件，重叠放置在同一容器内
  • 底层文本使用默认样式，无高亮背景
  • 上层文本设置高亮背景样式，初始状态设置为仅显示0宽度的内容
• 调用React Native Animated API，在180秒内线性控制上层文本的显示宽度从0过渡到100%，即可实现高亮区域平滑铺开的效果

示例代码 #

import React, { useRef, useEffect } from 'react';
import { View, Text, Animated, StyleSheet, Easing } from 'react-native';

const HIGHLIGHT_DURATION = 180 * 1000; // 总高亮时长180秒
const FULL_TEXT = "Lorem Ipsum is simply a dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

export default function HighlightText() {
  const highlightProgress = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(highlightProgress, {
      toValue: 1,
      duration: HIGHLIGHT_DURATION,
      useNativeDriver: false,
      easing: Easing.linear, // 匀速高亮保证时长精准
    }).start();
  }, []);

  return (
    <View style={styles.container}>
      {/* 底层未高亮文本 */}
      <Text style={styles.baseText}>{FULL_TEXT}</Text>
      {/* 上层高亮文本，显示宽度随动画变化 */}
      <Animated.View style={[styles.highlightWrapper, {
        width: highlightProgress.interpolate({
          inputRange: [0, 1],
          outputRange: ['0%', '100%']
        })
      }]}>
        <Text style={styles.highlightText}>{FULL_TEXT}</Text>
      </Animated.View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
  },
  baseText: {
    fontSize: 16,
    color: '#000',
    backgroundColor: 'transparent',
  },
  highlightWrapper: {
    position: 'absolute',
    top: 0,
    left: 0,
    overflow: 'hidden',
  },
  highlightText: {
    fontSize: 16,
    color: '#000',
    backgroundColor: '#ffeb3b', // 可自定义高亮背景色
  }
});

性能优化提示 #

如果想要更高的动画流畅度，可以把宽度控制改为scaleX变换，开启原生驱动，动画不会受JS线程卡顿影响：

1. 将动画配置的useNativeDriver改为true
2. 替换上层动画容器的样式即可：

<Animated.View style={[styles.highlightWrapper, {
  transform: [{ scaleX: highlightProgress }],
  transformOrigin: 'left',
}]}>

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