Expo51与React Native74中.lottie文件无法播放问题咨询

问题原因 #

当前lottie-react-native官方文档的metro配置说明未同步适配Expo 51的最新规则，导致.lottie格式文件无法被metro正确识别解析。

解决方案 #

1. 配置metro识别.lottie文件 #

在项目根目录的metro.config.js（无则新建）中添加.lottie文件的解析规则：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

// 新增.lottie扩展名到资源解析列表
config.resolver.assetExts.push('lottie');

module.exports = config;

2. 正确引用.lottie文件 #

使用ES模块导入方式引用动画文件，避免require语法：

import LottieView from 'lottie-react-native';
import lottieAnimation from './assets/your-animation.lottie';

// 组件内使用
<LottieView
  source={lottieAnimation}
  autoPlay
  loop
  style={{ width: 200, height: 200 }}
/>

3. 清除缓存重启服务 #

执行命令清除metro缓存，确保新配置生效：

npx expo start --clear

4. 确认依赖版本兼容性 #

安装适配Expo 51的lottie-react-native版本：

npx expo install lottie-react-native

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