从React迁移至React Native：如何获取元素并动态增减样式？

React Native 没有 DOM 环境，没法像 Web 那样通过 useRef 获取元素后操作 classList。替代方案是用状态管理样式切换，配合 React Native 的 StyleSheet 和状态更新来实现相同的动画逻辑。

针对你这个文字揭示动画组件，迁移思路如下：

• 用 useState 替代 DOM 类名的添加/移除，每个需要动态变化的元素对应一个状态控制其样式
• 将原 CSS 中的类样式转换为 React Native 的 StyleSheet 规则
• 保留原有的 setTimeout 时间线逻辑，通过更新状态触发样式变化

以下是完整的迁移代码：

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

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    overflow: 'hidden',
  },
  text: {
    fontSize: 16,
    color: '#000',
    transitionProperty: 'transform, opacity',
    transitionDuration: '0.7s',
  },
  hide: {
    opacity: 0,
  },
  shrink: {
    transform: [{ scale: 0 }],
  },
  mask: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    width: '50%',
    backgroundColor: '#fff',
    transitionProperty: 'transform',
    transitionDuration: '0.8s',
  },
  leftMask: {
    left: 0,
  },
  rightMask: {
    right: 0,
  },
  moveLeft: {
    transform: [{ translateX: '-100%' }],
  },
  moveRight: {
    transform: [{ translateX: '100%' }],
  },
});

export const WhiteTextReveal = (props) => {
  const { text, duration, callback } = props;
  const animationTimeouts = useRef([]);

  // 用状态控制各元素的样式
  const [leftMaskStyles, setLeftMaskStyles] = useState([styles.mask, styles.leftMask]);
  const [rightMaskStyles, setRightMaskStyles] = useState([styles.mask, styles.rightMask]);
  const [textStyles, setTextStyles] = useState([styles.text, styles.hide]);

  useEffect(() => {
    reveal();
    return () => {
      animationTimeouts.current.forEach(val => clearTimeout(val));
    };
  }, [text]);

  function reveal() {
    let time = 0;

    // 第一步：移动遮罩显示文字
    const timeout1 = setTimeout(() => {
      // 重置样式
      setTextStyles(prev => prev.filter(s => s !== styles.shrink));
      setLeftMaskStyles(prev => prev.filter(s => s !== styles.moveRight));
      setRightMaskStyles(prev => prev.filter(s => s !== styles.moveLeft));

      // 应用新样式
      setLeftMaskStyles([styles.mask, styles.leftMask, styles.moveLeft]);
      setRightMaskStyles([styles.mask, styles.rightMask, styles.moveRight]);
    }, 1000 * time);
    animationTimeouts.current.push(timeout1);

    // 第二步：显示文字，遮罩归位
    time += 0.8;
    const timeout2 = setTimeout(() => {
      setTextStyles(prev => prev.filter(s => s !== styles.hide));
      setLeftMaskStyles(prev => prev.filter(s => s !== styles.moveLeft));
      setRightMaskStyles(prev => prev.filter(s => s !== styles.moveRight));

      setLeftMaskStyles([styles.mask, styles.leftMask, styles.moveRight]);
      setRightMaskStyles([styles.mask, styles.rightMask, styles.moveLeft]);
    }, 1000 * time);
    animationTimeouts.current.push(timeout2);

    // 第三步：收缩文字并隐藏，触发回调
    time += 0.5 + duration;
    const timeout3 = setTimeout(() => {
      setTextStyles(prev => [...prev, styles.shrink]);
      const timeout4 = setTimeout(() => {
        setTextStyles(prev => [...prev, styles.hide]);
        callback?.();
      }, 0.7 * 1000);
      animationTimeouts.current.push(timeout4);
    }, 1000 * time);
    animationTimeouts.current.push(timeout3);
  }

  return (
    <View style={styles.container}>
      <Text style={textStyles}>{text}</Text>
      <View style={leftMaskStyles} />
      <View style={rightMaskStyles} />
    </View>
  );
};

关键说明 #

• 原 CSS 中的类样式被转换为 StyleSheet 规则，通过数组合并组合基础样式和动态样式
• 用 useState 管理各元素的样式数组，通过添加/移除数组中的样式项替代 Web 中的 classList.add/remove
• 保留原有的 setTimeout 时间线逻辑，确保动画时序和原组件一致
• React Native 中用 View 替代 Web 的 div，Text 替代 span，布局逻辑通过 position、transform 等属性实现

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