React Native 如何像二维码标记一样将边框设置到正方形的角上

Question

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

所以我想知道如何制作这 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

QRCodeScanner

有一个

customMarker

道具，允许您使用任何

JSX.Element

作为标记。

这是我目前正在使用的：

function marker(color: string, size: string | number, borderLength: string | number, thickness: number = 2, borderRadius: number = 0): JSX.Element {
  return <View style={{ height: size, width: size }}>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, top: 0, left: 0, borderColor: color, borderTopWidth: thickness, borderLeftWidth: thickness, borderTopLeftRadius: borderRadius }}></View>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, top: 0, right: 0, borderColor: color, borderTopWidth: thickness, borderRightWidth: thickness, borderTopRightRadius: borderRadius }}></View>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, bottom: 0, left: 0, borderColor: color, borderBottomWidth: thickness, borderLeftWidth: thickness, borderBottomLeftRadius: borderRadius }}></View>
    <View style={{ position: 'absolute', height: borderLength, width: borderLength, bottom: 0, right: 0, borderColor: color, borderBottomWidth: thickness, borderRightWidth: thickness, borderBottomRightRadius: borderRadius }}></View>
  </View>
}

在你的情况下可以这样使用：

  <QRCodeScanner
    ...
    customMarker={marker('white', '60%', '25%', 6, 20)}
  />

Answer 2

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

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

希望有帮助。有疑问请放心

Answer 3

这是我最近用过的：

<BarCodeScanner
            onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
            style={StyleSheet.absoluteFillObject}
          />
        </View>
       <View style={[styles.border,
       {
        width: qrCodeDimensions.width || 250,
        height: qrCodeDimensions.height || 250, 
      },
      ]}>
       <View style={[styles.corner, styles.topLeft]} />
        <View style={[styles.corner, styles.topRight]} />
        <View style={[styles.corner, styles.bottomLeft]} />
        <View style={[styles.corner, styles.bottomRight]} />
       </View>

       <View style={styles.tap}>
          {scanned && (
        <Button 
        title='Tap to Scan Again' onPress={() => setScanned(false)} />
      )}

//风格： 框架容器：{ 位置：'相对'， 弹性：1， justifyContent: '中心', 对齐项目：'居中'，

  },

  corner: {
    width: 30, // Adjust the width of the corner dashes
    height: 30, // Adjust the height of the corner dashes
    borderWidth: 5,
    borderColor: color.primary,
    position: 'absolute',
    borderRadius: 2
  },
  topLeft: {
    top: -1,
    left: -1,
    borderRightWidth: 0,
    borderBottomWidth: 0,
  },
  topRight: {
    top: -1,
    right: -1,
    borderLeftWidth: 0,
    borderBottomWidth: 0,
  },
  bottomLeft: {
    bottom: -1,
    left: -1,
    borderRightWidth: 0,
    borderTopWidth: 0,
  },
  bottomRight: {
    bottom: -2,
    right: -1,
    borderLeftWidth: 0,
    borderTopWidth: 0,
  },
  border: {
    width: 200,
    height: 200,
    borderWidth: 0,
    borderRadius: 10,
    borderColor: 'gray',
    position: 'relative',
  },