[英]LottieView Works in iOS Simulator, but doesn't work on device -- Expo
I've got a simple splash loading animation for my app -- and it used to work perfect, and still works perfect on my iOS simulator.我有一个简单的启动加载 animation 用于我的应用程序 - 它曾经完美运行,并且在我的 iOS 模拟器上仍然完美运行。 However, attempting to run the LottieView on my iOS device via LAN shows absolutely nothing, as well as if I publish a build and deploy it to the iOS App Store.但是,尝试通过 LAN 在我的 iOS 设备上运行 LottieView 完全没有显示任何内容,以及如果我发布构建并将其部署到 iOS 应用商店。 Interestingly enough though, if I go ahead and change any of the LottieView properties and then do a fast refresh -- it will begin showing on my device.有趣的是,如果我提前 go 并更改任何 LottieView 属性,然后进行快速刷新——它将开始在我的设备上显示。
I've been searching the forums, but I commonly find issues with LottieView working on Android -- which i know is because of a conflict, but no one has been able to really get this particular issue from what I've seen.我一直在搜索论坛,但我经常发现 LottieView 在 Android 上工作的问题——我知道这是因为冲突,但没有人能够从我所见的情况中真正得到这个特殊问题。 Any ideas?有任何想法吗?
Here's my code:这是我的代码:
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>
Here's the package-lock.json I've got:这是我得到的 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="
}
}
},
Here's the package.json:这是 package.json:
"lottie-ios": "^3.1.8",
"lottie-react-native": "5.0.1",
I can second this.我可以支持这个。
I am using expo and the Lottie files show fine in the iOS simulator but not at all on iPhone when accessing via the QR code我正在使用 expo 并且 Lottie 文件在 iOS 模拟器中显示正常,但在通过 QR 码访问时在 iPhone 上根本没有
EDIT I came across this post in the lottie-react-native github issues page - I can confirm it worked for me编辑我在lottie-react-native github 问题页面中看到这篇文章 - 我可以确认它对我有用
As of Expo SDK V44 (React Native V0.64.3), lottie-react-native V5.0.1 and lottie-ios V3.2.3.从 Expo SDK V44(React Native V0.64.3)开始,lottie-react-native V5.0.1 和 lottie-ios V3.2.3。 What I have found that works is to call the.play() method on the ref from the LottieView, on mount of the component.我发现有效的是在挂载组件时从 LottieView 的 ref 上调用 .play() 方法。 I referenced this from the official Expo Lottie documentation: https://docs.expo.dev/versions/latest/sdk/lottie/.我从官方 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 }}
/>
);
Hope I managed to help someone!希望我能帮助别人!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.