Блог

Я застрял на этом этапе, чтобы динамически выделить некоторую группу текста в течение некоторого времени. Как, например, у меня есть этот текст :

 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.
 

Я хочу, чтобы функция выделяла этот текстовый фон в течение 180 секунд.

Что я сделал, так это:

Видеосвязь

Логика, которую я использовал, заключается в том, что я создал два состояния s1, s2 с s1 в виде пустой строки и s2 со всем содержимым. Заявив таймер, я удаляю n символов из s2 и добавляю такое же n символов в s1 и показываю s1 и s2 вместе внутри <Text> .

Эта функция работает, но неправильно анимируется. Я хочу, чтобы плавная анимация подсветки CSS-перехода для этой функции полностью выделяла этот текст в течение некоторого времени.

Может ли кто-нибудь, пожалуйста, помочь мне реализовать эту функцию с помощью API-интерфейса React Native Animations

Заранее спасибо.

Чтобы динамически запустить новую анимацию, вам нужно условие. Вы можете использовать «Анимированный» из react-native. Вместо состояния установите ссылку и измените значение ссылки.

 import { Animated } from "react-native";

// this value can be animated one value to another
const animationRef = useRef<Animated.Value>(new Animated.Value(0));



if(condition){
    // pass array of animations
    Animated.sequence([
        Animated.timing(animationRef.current, {
            toValue: 1,
            // set the duration 
            duration: 500,
            useNativeDriver: false
        }),
        // delay is optional
        Animated.delay(1000),
        Animated.timing(animationRef.current, {
            toValue: 0,
            duration: 500,
          // useNativeDriver:true, might not work with the all properties that you need to animate. true might improve animation performance

            useNativeDriver: false
        })
    ]).start();

 }
 

Теперь в jsx вам нужно настроить свой компонент:

    // Touchable opacity cannot be animated
    <TouchableOpacity style={styles.item}>
        <Animated.View
            style={[
                styles.itemBackground,
                {
                    backgroundColor: animationRef.current.interpolate({
                        inputRange: [0, 1],
                        // if value is 0 color:black, value is 1 color:white
                        outputRange: [colors.black, colors.white]
                    })
                }
            ]}
        />
   </TouchableOpacity>
 

Анимированный.Позиция обзора должна быть абсолютной. Сохраните динамическую часть CSS в компоненте, но вы можете сохранить другие CSS в другом файле.

  //styles.itemBackground:

 itemBackground: { position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }