世博会中的洛蒂参考（反应原生）答案

【问题标题】：Lottie ref in Expo (react native)世博会中的洛蒂参考（反应原生）
【发布时间】：2022-06-14 19:32:54
【问题描述】：

我正在尝试将我现有的 React Native（打字稿）项目移至 Expo。除了带有 Lottie 动画的模态外，Expo 中的一切都运行良好（没有 expo，它工作正常）。

我的代码：

export const SuccessModal = ({isVisible = false, onAnimationFinish}: Props) => {
  let animation: any = React.createRef();

  useEffect(() => {
    if (isVisible) {
      animation.current.play();
    }
  }, []);

  return (
    <Modal
      visible={isVisible}
      backdropStyle={{backgroundColor: 'rgba(230, 228, 253, 0.5)'}}>
      <LottieView
        ref={animation}
        source={require('../assets/success-lottie.json')}
        style={{width: 300, height: 300}}
        autoPlay={true}
        loop={false}
        onAnimationFinish={onAnimationFinish}
      />
    </Modal>
  );
};

我想问题出在 ref={animation} 上，因为正在显示模式，但动画没有移动 - 似乎 animation.current.play() 没有在效果中调用。我按照其他帖子中的建议尝试了useRef(null) 和useRef<LottieView | null>(null)。还尝试使用命令重新安装lottie：expo install lottie-react-native。

有什么想法可能是错的吗？世博会有什么特别之处？

【问题讨论】：

标签： react-native expo lottie

【解决方案1】：

我认为在animation.current.play(); 之前调用animation.current.reset(); 可以解决问题。

我正在使用 const animation = useRef(null) 钩子，并且它也可以与 Expo 一起使用。

但是，默认情况下，初始 play() 无法正常工作，我已使用此技巧使其在组件加载后立即工作。

...
const animation = useRef(null);
...
useEffect(() => {
  animation.current?.reset();
  animation.current?.play();
}, []);

【讨论】：