React Native Lottie View动画播放/暂停/恢复功能实现问题求助

我来帮你补全并优化这个Lottie动画的播放控制功能，直接上代码和关键说明：

类组件实现方案（基于你提供的代码补全） #

首先，我们需要通过ref获取Lottie组件实例，调用它内置的play()/pause()/resume()方法，同时用状态跟踪播放状态来同步UI按钮：

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import LottieView from 'lottie-react-native';

class DetailsScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
      isPlaying: true // 初始标记为播放中
    };
  }

  static navigationOptions = {
    title: "Details",
    headerStyle: { backgroundColor: '#f4511e', },
    headerTintColor: '#fff',
    headerTitleStyle: { fontWeight: 'bold', },
    headerTruncatedBackTitle: 'List'
  };

  componentDidMount() {
    // 组件挂载后自动播放动画
    this.animation.play();
  }

  playLottie = () => {
    this.animation.play();
    this.setState({ isPlaying: true });
  };

  pauseLottie = () => {
    this.animation.pause();
    this.setState({ isPlaying: false });
  };

  resumeLottie = () => {
    this.animation.resume();
    this.setState({ isPlaying: true });
  };

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* Lottie动画组件，通过ref获取实例 */}
        <LottieView
          ref={animation => {
            this.animation = animation;
          }}
          source={require('./your-animation.json')} // 替换为你的Lottie动画JSON路径
          progress={this.state.progress}
          loop={true} // 开启循环播放，根据需求调整
          style={{ width: 300, height: 300 }} // 设置动画尺寸
        />
        {/* 控制按钮组 */}
        <View style={{ flexDirection: 'row', marginTop: 30, gap: 15 }}>
          {/* 根据播放状态切换按钮文本 */}
          {this.state.isPlaying ? (
            <Button title="暂停" onPress={this.pauseLottie} />
          ) : (
            <Button title="播放" onPress={this.playLottie} />
          )}
          <Button title="恢复" onPress={this.resumeLottie} />
        </View>
      </View>
    );
  }
}

export default DetailsScreen;

关键说明 #

• Ref的核心作用：通过ref获取LottieView的实例，才能直接调用它的内置控制方法，这是实现播放/暂停/恢复的核心
• 状态同步：用isPlaying状态来跟踪动画播放状态，让按钮文本和动画实际状态保持一致，提升用户体验
• 动画配置：记得把source路径替换成你本地的Lottie JSON文件，loop属性可以根据需求设置为true（循环）或false（单次播放）

函数组件实现方案（推荐，React Native现代写法） #

如果你的项目已经使用函数组件，这里提供更简洁的实现：

import React, { useRef, useState, useEffect, useLayoutEffect } from 'react';
import { View, Button } from 'react-native';
import LottieView from 'lottie-react-native';

const DetailsScreen = ({ navigation }) => {
  const animationRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(true);

  // 组件挂载后自动播放
  useEffect(() => {
    animationRef.current?.play();
  }, []);

  // 设置导航栏选项
  useLayoutEffect(() => {
    navigation.setOptions({
      title: "Details",
      headerStyle: { backgroundColor: '#f4511e', },
      headerTintColor: '#fff',
      headerTitleStyle: { fontWeight: 'bold', },
      headerTruncatedBackTitle: 'List'
    });
  }, [navigation]);

  const playLottie = () => {
    animationRef.current?.play();
    setIsPlaying(true);
  };

  const pauseLottie = () => {
    animationRef.current?.pause();
    setIsPlaying(false);
  };

  const resumeLottie = () => {
    animationRef.current?.resume();
    setIsPlaying(true);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <LottieView
        ref={animationRef}
        source={require('./your-animation.json')}
        loop={true}
        style={{ width: 300, height: 300 }}
      />
      <View style={{ flexDirection: 'row', marginTop: 30, gap: 15 }}>
        {isPlaying ? (
          <Button title="暂停" onPress={pauseLottie} />
        ) : (
          <Button title="播放" onPress={playLottie} />
        )}
        <Button title="恢复" onPress={resumeLottie} />
      </View>
    </View>
  );
};

export default DetailsScreen;

额外注意事项 #

• 确保你已经正确安装依赖：执行npm install lottie-react-native lottie-ios或yarn add lottie-react-native lottie-ios，React Native 0.60+版本会自动完成link操作
• 如果动画没有正常显示，检查JSON文件路径是否正确，或者尝试重新启动Metro服务

内容的提问来源于stack exchange，提问作者Heril Muratovic