React Native 异常记录 viewshot redmi note8 pro background失效

Zsama666

于 2021-08-27 15:01:40 发布

阅读量212

点赞数

本文链接：https://blog.youkuaiyun.com/loveseal518/article/details/119953024

版权

android 同时被 2 个专栏收录

40 篇文章

订阅专栏

react native

22 篇文章

订阅专栏

在使用React Native 0.59.8和react-native-view-shot 3.1.2的项目中，客户反馈在Redmi Note 8 Pro（MIUI 12.5.1）设备上，ViewShot组件的背景颜色设置失效。此问题未在其他小米机型如小米11U、小米10和小米8上复现。为了解决二维码识别问题，已将react-native-qrcode-svg升级到^6.0.6，并调整布局，确保二维码外侧有白色边框以辅助识别。此外，发现该版本的二维码组件要求二维码周围必须有白边，否则无法识别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

"react-native-view-shot": "^3.1.2",

"react-native": "0.59.8"

"react-native-qrcode-svg": "^6.0.6"

记录一个客户反馈的异常：rn版本0.59.8 view shot版本3.1.2

出现异常的机型：redmi note 8 pro miui 12.5.1

异常的现象：viewShot组件style中设置background颜色失效

                <ViewShot
                    style={styles.viewShot}
                    ref="viewShot" options={{format: "png", quality: 1, result: 'base64'}}>
                    <View
                        style={styles.viewCircleWhite}>
                    <QRCode
                        getRef={(c) => (this.svg = c)}
                        value={this.state.qrValue}
                        color={'#000'}//transparent
                        backgroundColor={'#ffffff'}
                        size={200}
                    />
                    </View>
                </ViewShot>

        viewShot: {
            alignSelf: 'center',
            backgroundColor: '#ffffff',
            padding: 20,
        }

        viewCircleWhite: {
            alignSelf: 'center',
            backgroundColor: '#ffffff',
            padding: 20,
        }

同类型排查：小米11u,小米10，小米8 均正常有效。

不知道是否这个机型BUG多，云测中都在占用

顺便说一下，

"react-native-qrcode-svg": "^6.0.6"这个版本识别二维码一定需要二维码外侧留一圈白边，如果是黑边就无法识别，原来的逻辑使用viewshot做一个白色外框，现修改为 中间嵌一层view做白色外框，这样不影响扫描识别和保存图片到本地。