如何禁用Lottie动画循环，设置其仅播放一次？

在Expo里用Lottie的时候，默认确实是循环播放的，要改成只播一次其实超简单，只需要调整两个核心属性就行：

• 设置loop={false}：这个属性直接关掉循环播放的机制
• 设置autoPlay={true}：保证组件加载完成后动画自动启动（要是你不需要自动播放，这个可以去掉，看你具体场景）

完整代码示例 #

import LottieView from 'lottie-react-native';

// 在你的组件中使用
<LottieView
  source={require('./your-animation-file.json')} // 替换成你自己的动画文件路径
  autoPlay={true}
  loop={false}
/>

要是你需要手动触发播放（比如用户点击按钮后再播一次），还可以通过ref来控制，因为已经把loop设为false了，每次调用play()都会只播放一遍：

import { useRef } from 'react';
import LottieView from 'lottie-react-native';
import { Button } from 'react-native';

function CustomAnimationComponent() {
  const animationRef = useRef(null);

  const triggerAnimationOnce = () => {
    animationRef.current?.play();
  };

  return (
    <>
      <LottieView
        ref={animationRef}
        source={require('./your-animation-file.json')}
        loop={false}
      />
      <Button title="播放一次动画" onPress={triggerAnimationOnce} />
    </>
  );
}

这么设置之后，动画就会从头到尾只播放一次，不会再循环啦。

内容的提问来源于stack exchange，提问作者Romo Islam