React Native如何像QR码标记一样只在广场的角落制作边框

Question

我正在尝试制作如下图所示的 QR 码标记。

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

默认标记是这样的：

这是我的代码：

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

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

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

Answer 1

如果它本来是一条直线，通过设置边界半径就很容易了。但由于它有点不同，您可以使用此库实现此目的：

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

希望对您有所帮助。有问必答

React Native如何像QR码标记一样只在广场的角落制作边框

React Native how to make border to the corner of the square only like QR code marker

qr-code

border

react-native

react-native-stylesheet