求助：lottie-react-native中ResizeMode失效，Android启动页全屏动画遇阻

我在Android应用中用lottie-react-native做启动页，想通过resizeMode='cover'让动画全屏显示，但这个属性完全没用。只有给LottieView的style设置height和width时，动画才能正常显示，请问原因是什么？

我的代码：

<View style={{flex: 1,alignItems:'center', margin:0}}>
   <LottieView
     source={require('../assets/xBFpgqn6o0.json')}
     autoPlay
     loop={false}
     resizeMode='cover'
  />
</View>

原因 #

resizeMode的作用是基于LottieView自身的尺寸调整动画内容的缩放方式，如果组件本身没有明确的尺寸约束（比如没设置宽高、flex或其他布局规则让它占据确定空间），这个属性就没有生效的基础，自然看不到效果。你之前的代码里，父View加了alignItems:'center'，会让LottieView以自身原始尺寸居中显示，而非占满父容器，所以resizeMode='cover'根本没发挥作用。

解决方案 #

给LottieView设置布局规则让它占满父容器空间，同时保留resizeMode='cover'即可：

修改后的代码

<View style={{flex: 1, margin: 0}}>
  <LottieView
    source={require('../assets/xBFpgqn6o0.json')}
    autoPlay
    loop={false}
    resizeMode='cover'
    style={{flex: 1}}
  />
</View>

说明

1. 去掉父View的alignItems:'center'，避免限制LottieView的居中显示，让它可以占满整个父容器
2. 给LottieView的style加上flex:1，它会继承父容器的flex布局，占满整个屏幕空间
3. 此时resizeMode='cover'会基于这个全屏尺寸，按动画原始比例缩放内容，超出屏幕的部分会被裁剪，刚好实现全屏覆盖的效果

如果需要更精确的控制（比如适配不同屏幕尺寸），也可以用Dimensions获取屏幕宽高后直接设置：

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

// ...

<View style={{flex: 1, margin: 0}}>
  <LottieView
    source={require('../assets/xBFpgqn6o0.json')}
    autoPlay
    loop={false}
    resizeMode='cover'
    style={{width, height}}
  />
</View>

内容的提问来源于stack exchange，提问作者J Diep