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

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

阿飞正传的阿飞

2055人浏览 · 2017-05-18 17:50:23

阿飞正传的阿飞 · 2017-05-18 17:50:23 发布

背景

最近遇到一个营销的需求，一个简单的界面，上面是一个计数器，下面是一张介绍图。所以下面直接用了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="text/html; charset=utf-8">
                <meta name="viewport" content="width=320, user-scalable=no">
                <style type="text/css">
                    body{
                        margin:0;
                        padding:0;

                    }
                    img{
                        width:100%;
                    }
                </style>
              </head>
              <body>
                <img src="https://m.tuniucdn.com/fb2/t1/G1/M00/F1/51/Cii9EFkAaZ-IRgGNAATB18ldk0UAAJzuQN-p1cABMHv15.jpeg"/>
              </body>
            </html>
            `;

        let image =  (
            <Image style={styles.image}
                   source={{uri: 'https://m.tuniucdn.com/fb2/t1/G1/M00/F1/51/Cii9EFkAaZ-IRgGNAATB18ldk0UAAJzuQN-p1cABMHv15.jpeg'}}/>);

        let webView = (
            <WebView
                style={styles.image}
                automaticallyAdjustContentInsets={false}
                source={{html:HTML}}
                javaScriptEnabled={true}
                domStorageEnabled={true}
                decelerationRate="normal"
                startInLoadingState={true}
                scalesPageToFit={false}
                onLoadEnd = {()=>{console.log('loading end')}}
                onError = {()=>{console.log('loading error')}}
            />
            )

        let ImageShow = Platform.OS==='android' ? webView: image;
        return (
            <View style={styles.bgView}>
                <Header title = '牛大头'></Header>
                <ScrollView style={styles.scrollView}>
                    <View style={styles.tipBgView}>
                        <Image source = {require('./images/icon-ask-home-tip.png')}
                        style={styles.tipIcon}/>
                        <Text style={styles.tipText}>{leftNum}</Text>
                    </View>
                    {ImageShow}
                </ScrollView>
            </View>
        )