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

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

父视图没有什么好笑的，所以我真的很困惑为什么心脏没有占据动画视图的全部宽度和高度。这也使得将该元素放置在任一图标旁边变得困难。

Answer 1

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

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