LottieView 在 iOS 模拟器中工作，但在设备上不起作用 -- Expo

Question

我有一个简单的启动加载 animation 用于我的应用程序 - 它曾经完美运行，并且在我的 iOS 模拟器上仍然完美运行。 但是，尝试通过 LAN 在我的 iOS 设备上运行 LottieView 完全没有显示任何内容，以及如果我发布构建并将其部署到 iOS 应用商店。 有趣的是，如果我提前 go 并更改任何 LottieView 属性，然后进行快速刷新——它将开始在我的设备上显示。

我一直在搜索论坛，但我经常发现 LottieView 在 Android 上工作的问题——我知道这是因为冲突，但没有人能够从我所见的情况中真正得到这个特殊问题。 有任何想法吗？

这是我的代码：

return (
<View
  style={{
    backgroundColor: "white",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  }}
>
  <LottieView
    style={{ width: 150, height: 150 }}
    source={require("../assets/data.json")}
    autoPlay={true}
    loop={true}
    speed={2}
  />
  {Platform.OS === "android" && (
    <Image
      style={{ width: "100%", resizeMode: "contain" }}
      source={require("../assets/splash.png")}
    />
  )}
  {isLoading && Platform.OS === "android" ? (
    <View style={{ position: "absolute", bottom: "32%" }}>
      <Spinner size="giant" />
    </View>
  ) : null}
  {isError ? (
    <Text
      category="label"
      style={{ fontSize: 20, textAlign: "center", color: "grey" }}
    >
      No Internet Connection
    </Text>
  ) : null}
</View>

这是我得到的 package-lock.json：

 "lottie-ios": {
  "version": "3.2.2",
  "resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-3.2.2.tgz",
  "integrity": "sha512-buYj/HbzoTeqiVy+Hpzfd2STdRW7RJnne+09z48nVvBYO+ioG5B5EvRb92pYOoRDNr0stQpfurzK1uFXW4gGCA=="
},
"lottie-react-native": {
  "version": "2.6.1",
  "resolved": "https://registry.npmjs.org/lottie-react-native/-/lottie-react-native-2.6.1.tgz",
  "integrity": "sha512-Z+6lARvWWhB8n8OSmW7/aHkV71ftsmO7hYXFt0D+REy/G40mpkQt1H7Cdy1HqY4cKAp7EYDWVxhu5+fkdD6o4g==",
  "requires": {
    "invariant": "^2.2.2",
    "lottie-ios": "2.5.0",
    "prop-types": "^15.5.10",
    "react-native-safe-module": "^1.1.0"
  },
  "dependencies": {
    "lottie-ios": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/lottie-ios/-/lottie-ios-2.5.0.tgz",
      "integrity": "sha1-VcgI54XUppM7DBCzlVMLFwmLBd4="
    }
  }
},

这是 package.json：

"lottie-ios": "^3.1.8",
"lottie-react-native": "5.0.1",

Answer 1

我可以支持这个。

我正在使用 expo 并且 Lottie 文件在 iOS 模拟器中显示正常，但在通过 QR 码访问时在 iPhone 上根本没有

---

编辑我在lottie-react-native github 问题页面中看到这篇文章 - 我可以确认它对我有用

从 Expo SDK V44（React Native V0.64.3）开始，lottie-react-native V5.0.1 和 lottie-ios V3.2.3。 我发现有效的是在挂载组件时从 LottieView 的 ref 上调用 .play() 方法。 我从官方 Expo Lottie 文档中引用了这一点： https://docs.expo.dev/versions/latest/sdk/lottie/。

const animationRef = useRef<LottieView | null>(); // The <> is 
for TypeScript, but can be removed for JavaScript

 useEffect(() => {
   animationRef.current?.play();
 }, []);

 return (
<LottieView
  ref={(animation) => {
    animationRef.current = animation;
  }}
  source={require("../path_to_animation_folder)}
  autoPlay
  loop
  style={{ width, height }}
/>
);

希望我能帮助别人！