LottieView在iOS模拟器上可以工作，但在设备上无法工作--Expo。

Question

我为我的应用程序设计了一个简单的闪屏加载动画--它曾经工作得很好，在我的iOS模拟器上仍然完美地运行。然而，尝试通过局域网在我的iOS设备上运行LottieView时完全没有显示，如果我发布一个构建并将其部署到iOS应用商店也是如此。有趣的是，如果我继续更改任何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",

- Taha Bashir

---

请澄清您的具体问题或提供额外细节以准确突出您需要什么。目前的描述不够清晰，很难确定您在询问什么。 - Community

Answer 1

我也同意这个观点。

我正在使用Expo，Lottie文件在iOS模拟器中显示正常，但是通过QR码访问iPhone时根本不显示。

---

编辑 我在lottie-react-native github issues page上看到了这篇文章 - 我可以确认它对我有效

截至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 }}
/>
);

希望我能帮助到某人！

- Simon Bertoli