React Native Expo中.lottie文件Android不显示但iOS正常，求解决方案

这个问题确实有不少开发者遇到过，下面针对你的疑问和问题给出具体说明和解决方案：

一、.lottie格式在Android端的已知限制 #

• Expo集成的Lottie库在Android平台上对.lottie压缩格式的支持存在兼容性差异：.lottie是Lottie的二进制压缩格式，iOS端的Lottie实现对该格式的解析逻辑更完善，而Android端的旧版解析器可能无法正确处理某些压缩细节，导致动画无法渲染。
• 部分.lottie文件如果包含Android Lottie不支持的高级动画特性（比如特定的渐变效果、路径动画），也会出现无法显示的情况。

二、可行解决办法 #

1. 转换.lottie为JSON格式（最直接有效） #

将.lottie文件导出为JSON格式是最可靠的方案，你已经验证过此方法可行。转换方式：

• 打开Lottie官方在线编辑器，上传你的.lottie文件，选择导出为JSON格式，替换原文件后即可在Android正常播放。

2. 升级Expo Lottie依赖版本 #

旧版本的expo-lottie或lottie-react-native可能存在Android端的解析bug，升级到最新稳定版通常能修复这类兼容性问题：

npx expo install expo-lottie

3. 改用URI方式加载.lottie文件 #

避免使用require直接引入，改用Expo的文件系统API获取本地URI加载，可能绕过Android的文件类型识别问题：

import React, { useState, useEffect } from 'react';
import { View } from 'react-native';
import LottieView from 'lottie-react-native';
import * as FileSystem from 'expo-file-system';

export default function YourComponent({ size }) {
  const [lottieUri, setLottieUri] = useState(null);

  useEffect(() => {
    async function getLottieUri() {
      const assetInfo = await FileSystem.getAssetInfoAsync(require("@/assets/lottie/wave.lottie"));
      setLottieUri(assetInfo.uri);
    }
    getLottieUri();
  }, []);

  if (!lottieUri) return null;

  return (
    <View className="absolute top-0 left-0 w-[100vw] h-[100vh] opacity-100 flex flex-col">
      <View className="w-full bg-black" style={{ height: `${size}%` }} />
      <LottieView
        source={{ uri: lottieUri }}
        style={{
          height: "26%",
          transform: [{ rotate: "180deg" }],
          marginTop: -5,
        }}
        autoPlay
        loop
      />
    </View>
  );
}

4. 检查并修复.lottie文件的兼容性 #

使用Lottie官方的验证工具检查你的.lottie文件，确认是否存在Android不支持的特性，修复后再尝试使用：

• 上传文件到Lottie验证工具，查看报错提示，针对性调整动画内容（比如移除不兼容的效果）。

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