Lottie动画与其在React Native中的容器相比非常小

Question

I have an on click animation that is working perfectly, but I can't get the actual animated element to be more "zoomed" in. It looks like this:

Here's the code:

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

there's nothing funny going on with the parent View, so I'm really confused as to why the heart isn't taking the full width and height of the Animation view. This also makes placing this element next to either icons difficult.

Answer 1

You can try add some properties of Lottie Animation:

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