Блог

Главная - Вопросы по программированию - Как создать пользовательский анимированный переключатель цвета фона react native

Как создать пользовательский анимированный переключатель цвета фона react native

#react-native #animation

#react-native #Анимация

Вопрос:

Привет! Недавно я начал изучать React Native и хочу, чтобы на этой кнопке постоянно мигали два цвета ((( Пожалуйста, проверьте мой код, я не могу заставить его работать. Конечно, он должен работать на двух платформах IOS и Android

 const InviteChildButton = ({ changeInvite }: IProps) => {
  const { invitation } = useTranslation();
  const { username } = useSelector((state: RootState) => state.child);

  const animatedColor = new Animated.Value(0);
  const backgroundColorAnimation = animatedColor.interpolate(
    {
      inputRange: [0, 0.5,],
      outputRange: ['rgba(113, 255, 139, 0.1)', 'rgba(255, 169, 139, 0.1)']
    });

  useEffect(() => {
    Animated.timing(backgroundColorAnimation, {
      toValue: 1,
      duration: 5000,
      useNativeDriver:true
    }).start();
  }, []);

  return (
    <View style={styles.container}>
      <View>
        <CustomText
          style={styles.text}
          text={`${invitation} ${username}`}
          variant='h3'
          type='normal'
        />
      </View>
      <Animated.View style={[styles.button, {backgroundColor: backgroundColorAnimation }]}>
        <TouchableOpacity onPress={changeInvite}>
          <Image style={styles.image} source={Images.inviteLogoButton} />
        </TouchableOpacity>
      </Animated.View>

    </View>
  );
};

export default InviteChildButton;

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

1. не могли бы вы обернуть анимированный вид с помощью touchble, а не того, что у вас есть <Touchble><Animatev.View></Touchble>

Ответ №1:

Animated.timing ожидает анимированное значение, попробуйте изменить backgroundColorAnimation на animatedColor и отключить собственный драйвер, я не думаю, что он поддерживает интерполяцию цвета фона.