时间戳

首页 > 解决方案 > React Native如何像QR码标记一样只在正方形的角落制作边框

react-native - React Native如何像QR码标记一样只在正方形的角落制作边框

问题描述

我试图制作一个如下图所示的二维码标记。

在此处输入图像描述

所以我想知道如何制作这 4 个角而不是完整的边框标记。

我目前正在使用react-native-qrcode-scanner。

默认标记是这样的：

在此处输入图像描述

这是我的代码：

<QRCodeScanner
        // containerStyle={{ height: '100%' }}
        // cameraStyle={{ height: '100%' }}
        onRead={handleScan}
        showMarker
        markerStyle={{ borderColor: colors.primary, borderRadius: 20 }}
        cameraProps={{
          captureAudio: false,
          flashMode: RNCamera.Constants.FlashMode.auto,
        }}

但我想把它改成我给的第一张图片。

如果有人可以提供帮助，我们将不胜感激。谢谢

标签： react-nativeborderqr-codereact-native-stylesheet

解决方案

如果它是一条直线，那么通过设置边界半径会很容易。但由于它有点不同，你可以通过使用这个库来实现这一点：

RN-svg，您可以在其中提供 xml 模式，它会相应地呈现，只是您需要定位在标记旁边，就是这样。

希望能帮助到你。随时怀疑

推荐阅读