Lottie动画与其原生的反应容器相比非常小

Question

我有一个完美的点击动画，但我无法让实际的动画元素更加“缩放”＃34;在。看起来像这样：

以下是代码：

import { Animated, TouchableHighlight } from 'react-native';
import Animation from 'lottie-react-native';

    // a bunch of code here
  render() {
    return (
      <TouchableHighlight
        onPress={this.animate}
        underlayColor="transparent"
      >
        <Animation
          style={{
            backgroundColor: 'red',
            width: 150,
            height: 150,
          }}
          source={favoriteHeart}
          progress={this.state.progress}
        />
      </TouchableHighlight>
    );
  }

对于父视图，没有什么可笑的，所以我真的很困惑为什么心脏没有占据动画视图的整个宽度和高度。这也使得将这个元素放在任何一个图标旁边都很困难。

Answer 1

您可以尝试添加Lottie Animation的一些属性：

<Animation
   style={{
       backgroundColor: 'red',
       width: 150,
       height: 150,
   }}
   source={favoriteHeart}
   progress={this.state.progress}
   resizeMode = 'cover'
 />