如何在React Native中处理图像序列

Question

我目前有一个基本的1页React Native应用程序适用于iOS（iPad 4），它显示相机提要并覆盖图像序列。该图像序列由149个帧组成，并且它不断循环。

我通过每秒24次替换Image组件的来源来实现图像序列循环。

这是app类（没有样式道具）。

class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            frame: 1
        };
    }

    componentDidMount() {
        setInterval(() => {
            let frame = this.state.frame;

            frame++;

            if (frame > 149) {
                frame = 1;
            }

            this.setState({frame});
        }, 1000 / 24);
    }

    render() {
        return (
            <View style={styles.container}>
                <Camera ref={(cam) => {this.camera = cam}}>
                    <Text>Frame: {this.state.frame}</Text>
                    <Image source={{uri: `./gifs/${this.state.frame}.gif`}}/>
                </Camera>
            </View>
        );
    }

}

将此作为输出。

我遇到的问题是应用程序在不同的时间长度后崩溃。有时它会在崩溃前运行3秒钟，有时它会在崩溃前运行2分钟。

我猜这是一个内存问题，但在Xcode的调试器中它只使用了大约10％的可用内存。有没有办法以某种方式只将我需要的图像加载到内存中并删除我不会自动管理的图像？

Answer 1

尝试react-native-sprite，它使用原生UIImageView而不是javascript setInterval解决方案来动画图像序列。