如何在react native中抓取元素并动态添加或删除其中的样式

我来自React的世界，试图将一个组件翻译成React Native。在react中，我们可以很容易地用useRef抓取一个元素，然后添加或删除类。

当我检查<Text>元素的current属性时，是否有一种方法可以很容易地将其转换为原生反应，它看起来与html元素完全不同。

以下是我试图转换的文件：

import React, {useState, useEffect, useRef} from 'react';

// styles
import styles from './whiteTextReveal.module.css';

export const WhiteTextReveal = props => {
    // props
    const {text, duration, callback} = props;
    // local
    const leftMask = useRef(null);
    const rightMask = useRef(null);
    const textRef = useRef(null);
    const animationTimeouts = useRef([]);

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

    function reveal() {
        let time = 0;
        // reveal first white masks
        const timeout1 = setTimeout(() => {
            // cleanup if called successively
            textRef.current.classList.remove(styles.shrink);
            leftMask.current.classList.remove(styles.moveRight);
            rightMask.current.classList.remove(styles.moveLeft);

            leftMask.current.classList.add(styles.moveLeft);
            rightMask.current.classList.add(styles.moveRight);
        }, 1000*time);
        animationTimeouts.current = [...animationTimeouts.current, timeout1];

        // reveal text behind first white mask
        time = time + .8; // come from the css file .mask.left.moveLeft
        const timeout2 = setTimeout(() => {
            textRef.current.classList.remove(styles.hide);
            leftMask.current.classList.remove(styles.moveLeft);
            rightMask.current.classList.remove(styles.moveRight);

            leftMask.current.classList.add(styles.moveRight);
            rightMask.current.classList.add(styles.moveLeft);
        }, 1000*time);
        animationTimeouts.current = [...animationTimeouts.current, timeout2];

        // move mask to cover text again
        time = time + .5 + duration; // come from the css file .mask.left.moveRight
        const timeout3 = setTimeout(() => {
            textRef.current.classList.add(styles.shrink);
            const timeout4 = setTimeout(() => {
                textRef.current.classList.add(styles.hide);
                callback()
            }, .7*1000);
            animationTimeouts.current = [...animationTimeouts.current, timeout4];
        }, time*1000);
        animationTimeouts.current = [...animationTimeouts.current, timeout3];

    }
    return (
        <div className={styles.container}>
            <span ref={textRef} className={`${styles.text} ${styles.hide}`}>{text}</span>
            <div ref={leftMask} className={`${styles.mask} ${styles.left}`}/>
            <div ref={rightMask} className={`${styles.mask} ${styles.right}`}/>
        </div>
    )
};

这是一个文本动画显示，它在文本上绘制一条白色条纹，向后滑动，并在通知父组件完成之前将文本缩放为0。

从这些行中可以看到：

textRef.current.classList.remove(styles.shrink);
leftMask.current.classList.remove(styles.moveRight);
rightMask.current.classList.remove(styles.moveLeft);

我正在抓取引用，然后删除类。后面的行以特定的方式添加这些类。