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

Question

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

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

这是应用程序类(没有样式 Prop )。

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 解决方案为图像序列设置动画。