Блог

Главная - Вопросы по программированию - Как мы можем сделать анимированный переход в react native text?

Как мы можем сделать анимированный переход в react native text?

#reactjs #react-native #react-animated

#reactjs #react-native #react-анимированный

Вопрос:

У меня есть список задач, каждый элемент списка имеет флажок. Когда я устанавливаю флажок, анимированный сквозной эффект должен отображаться слева направо. Как это сделать?

Ответ №1:

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

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

export default function App() {
  const ref = React.useRef(View.prototype);
  const animatedValue = React.useRef(new Animated.Value(0)).current;

  const [textWidth, setTextWidth] = React.useState(0);
  const [textHeight, setTextHeight] = React.useState(0);

  React.useEffect(() => {
    ref.current.measure((x, y, w, h) => {
      setTextWidth(w);
      setTextHeight(h);
      animateStrike();
    });
  }, []);

  const animateStrike = () => {
    Animated.timing(animatedValue, {
      toValue: 1,
      duration: 2000,
      easing: Easing.linear,
      useNativeDriver: false,
    }).start();
  };

  const strikeWidth = animatedValue.interpolate({
    inputRange: [0, 1],
    outputRange: [0, textWidth],
    extrapolate: 'clamp',
  });

  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.text} ref={ref}>
          Some Dummy Text
        </Text>
        <Animated.View
          style={[
            styles.strike,
            { width: strikeWidth, top: textHeight / 2   1 },
          ]}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    fontWeight: '400',
  },
  strike: {
    position: 'absolute',
    height: 2,
    backgroundColor: 'red',
  },
});

Вы можете проверить демонстрацию здесь.

Комментарии:

1. Я не знаю, почему этот код не работает на моем локальном компьютере

2. @SupriyaGorai Ты проверял snack?

3. @SupriyaGorai Я рад. Спасибо. Удачи.

4. @J.Dow как я могу снова сбросить анимацию? как будто у меня есть флажок при нажатии на флажок, анимация выполняется правильно. но когда я снимаю флажок и снова проверяю, анимация не отображается, она отображается как обычная простановка

5. @SupriyaGorai Это помогло мне, когда я был новичком. Если вы предпочитаете react-native-reanimated, то это хорошая отправная точка.

Ответ №2:

Невозможно создать strikethough текст с анимацией, но вы можете настроить его так, как это делается здесь Текстовая анимация с помощью CSS — strike through line

Вы можете создать пользовательскую горизонталь ProgressBar и анимировать ее с помощью absolute on Text , чтобы она выглядела так, как вы хотите.