javascript - 与 React Native 中的容器相比，Lottie 动画非常小

Question

我有一个运行完美的点击动画，但我无法让实际的动画元素更加“放大”。它看起来像这样:

代码如下:

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>
    );
  }

父 View 没有发生任何有趣的事情，所以我真的很困惑为什么心脏没有占据动画 View 的完整宽度和高度。这也使得将此元素放置在任一图标旁边变得困难。

Answer 1

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

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