React-родной Animated.Image svg - PullRequest
Новая
       6

React-родной Animated.Image svg

0 голосов
/ 13 марта 2020

Мне нужно отобразить изображение SVG, но я должен применить анимацию к нему, поэтому я подумал, что я бы использовал Animated.Image, но, кажется, не работает хорошо, пространство занято, как видно, если вы пытаетесь, но изображение не видно .

Можете ли вы помочь мне?

Ссылка: Экспо

KeyboardAwareImage: 

import React, { useEffect } from 'react';
import { Animated, Keyboard, Platform } from 'react-native';
import PropTypes from 'prop-types';
import styles from './styles';
import Metrics from '../../config/metrics';

const IMAGE_HEIGHT = Metrics.screenHeight / 3;
const IMAGE_HEIGHT_SMALL = Metrics.screenHeight / 5;

export default function KeyboardAwareImage({ source }) {
  const imageHeight = new Animated.Value(IMAGE_HEIGHT);

  useEffect(() => {
    const isIos = Platform.OS === 'ios';
    const keyboardShow = isIos ? 'keyboardWillShow' : 'keyboardDidShow';
    const keyboardHide = isIos ? 'keyboardWillHide' : 'keyboardDidHide';
    const keyboardWillShowSub = Keyboard.addListener(keyboardShow, () =>
      keyboardType(IMAGE_HEIGHT_SMALL),
    );
    const keyboardWillHideSub = Keyboard.addListener(keyboardHide, () =>
      keyboardType(IMAGE_HEIGHT),
    );

    return () => {
      keyboardWillShowSub.remove();
      keyboardWillHideSub.remove();
    };
  }, []);

  const keyboardType = value => {
    Animated.timing(imageHeight, {
      duration: 240,
      toValue: value,
    }).start();
  };

  return (
    <Animated.Image
      source={source}
      style={[styles.icon, { width: imageHeight, height: imageHeight }]}
    />
  );
}

KeyboardAwareImage.propTypes = {
  source: PropTypes.number,
};
...