Android上的RN不能展示尺寸大的图，怎么办？

最新推荐文章于 2021-10-28 16:57:00 发布

阿飞正传的阿飞

最新推荐文章于 2021-10-28 16:57:00 发布

阅读量1.8k

点赞数

分类专栏： react-native 文章标签： android react-native 大图

本文链接：https://blog.csdn.net/njafei/article/details/72478515

版权

在Android应用中使用React Native（RN）时，由于一张750x4520像素的大图超过了设备的最大纹理尺寸（4096x4096），导致图片无法渲染。为了解决此问题，可以利用RN的WebView组件加载图片，WebView对图片的优化较好且支持多种格式。通过将图片内容作为HTML字符串传给WebView，可以成功显示大图。总结来说，对于营销界面，使用H5配置界面更为便捷，但在前端资源有限的情况下，结合WebView展示大图也是可行方案，展示了前端技术的融合趋势。

摘要由CSDN通过智能技术生成

背景

最近遇到一个营销的需求，一个简单的界面，上面是一个计数器，下面是一张介绍图。所以下面直接用了Image标签来做。但是在测试中发现了一个问题，部分的Android手机上面展示不出来图片。使用Android studio检查了下log，发现了如下的错误：

OpenGLRenderer: Bitmap too large to be uploaded into a texture (750x4520, max=4096x4096

这个因为图片的尺寸过大（注意，不是大小哦），导致Android手机不能渲染，那么怎么解决这个问题呢？

解决

这里推荐使用webView，RN提供的webView功能还算强大，可以把它作为一个容易来装图片，最重要的是，大部分的Android手机对webView的优化还是非常不错的。而且webView还支持多种格式，你甚至可以把html代码写入一个字符串中传给webView。具体请参考wiki:http://reactnative.cn/docs/0.43/webview.html#content

实现代码如下：

let leftNum = this.getLeftNumberText();
        const HTML = `
            <!DOCTYPE html>\n
            <html>
              <head>
                <title>Hello Static World</title>
                <meta http-equiv="content-type" content<