react-native-qrcode 不适合它的元素答案

【问题标题】：react-native-qrcode doesn't fit it's elementreact-native-qrcode 不适合它的元素
【发布时间】：2020-11-17 12:46:07
【问题描述】：

我正在使用“react-native-qrcode”库并尝试创建一个 QR 码，它似乎一直在工作，直到我想让它 100% 占用它自己的容器。

我已经尝试过：

放到View里面，不行
在上述视图和二维码上使用 flex: 1

注意：我不得不更改 node_modules 中的 WebView，因为它现在是一个单独的库。

import React from 'react';
import QRCode from 'react-native-qrcode';

export default function CardDetails({ navigation }) {
    return (
        <QRCode
            value={"Hello World"}
            size={250}
        />
    )
}

【问题讨论】：

您必须将 static size 指向您的 QrCode ...如果您想让 QrCode 采用容器的大小...动态计算容器的大小，然后将其作为道具传递给您的 QrCode
我不确定我们是否在谈论同一件事。 :) 白色矩形是二维码。但是代码（黑色的东西）没有占据 QR 码元素的完整大小。

标签： react-native android-studio android-emulator qr-code

【解决方案1】：

问题源于二维码库。这是库中的代码。如果我将画布 -> 上下文 -> 大小更改为大小 * 4，它将始终覆盖整个空白区域，并且每当我传递另一个大小时都会适应/动态变化。

附：仍在试图弄清楚为什么 x4 是解决方案。

return (
            <View>
                <Canvas
                    context={{
                        size: size,
                        value: this.props.value,
                        bgColor: this.props.bgColor,
                        fgColor: this.props.fgColor,
                        cells: qr(value).modules,
                    }}
                    render={renderCanvas}
                    onLoad={this.props.onLoad}
                    onLoadEnd={this.props.onLoadEnd}
                    style={{height: size, width: size}}
                />
            </View>
        );

【讨论】：