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

Question

我正在尝试制作如下图所示的 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,
        }}

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

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

Answer 1

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

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

希望能有所帮助。有疑问请随意