OGeek|极客世界-中国程序员成长平台

标题: ios - 如何在 React Native 中处理图像序列 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-12 10:59
标题: ios - 如何在 React Native 中处理图像序列

我目前有一个适用于 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% 的可用内存。有没有办法以某种方式仅将我需要的图像加载到内存中并删除我不需要的图像，或者这是自动管理的？

---

Best Answer-推荐答案

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

关于ios - 如何在 React Native 中处理图像序列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36835193/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://ogeek.cn/)

Powered by Discuz! X3.4