React Native实现仅方形边角的二维码扫描框（QR码定位标记）

Got it, let's tackle this problem! The default markerStyle in react-native-qrcode-scanner doesn't let you render just the four corner borders instead of a full frame. But we can work around this by hiding the default marker and building our custom corner-style overlay manually. Here's how to do it:

Step 1: Hide the Default Marker #

First, disable the built-in marker by setting showMarker={false} on the QRCodeScanner component. This removes the full border we don't want.

Step 2: Build the Custom Corner Marker #

We'll create four small view elements to act as the four corners, positioned absolutely over the camera view. We'll wrap them in a container to keep everything aligned.

Full Code Example #

import React from 'react';
import { View, StyleSheet } from 'react-native';
import QRCodeScanner from 'react-native-qrcode-scanner';
import { RNCamera } from 'react-native-camera';
import colors from './path-to-your-colors-file'; // Adjust this import to your project's color config

const YourScannerComponent = ({ handleScan }) => {
  return (
    <QRCodeScanner
      onRead={handleScan}
      showMarker={false} // Hide default full border marker
      cameraProps={{
        captureAudio: false,
        flashMode: RNCamera.Constants.FlashMode.auto,
      }}
    >
      {/* Custom corner-only marker overlay */}
      <View style={styles.scannerFrame}>
        {/* Top-left corner */}
        <View style={[styles.corner, styles.topLeft]} />
        {/* Top-right corner */}
        <View style={[styles.corner, styles.topRight]} />
        {/* Bottom-left corner */}
        <View style={[styles.corner, styles.bottomLeft]} />
        {/* Bottom-right corner */}
        <View style={[styles.corner, styles.bottomRight]} />
      </View>
    </QRCodeScanner>
  );
};

const styles = StyleSheet.create({
  scannerFrame: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: [{ translateX: -150 }, { translateY: -150 }], // Centers the frame (half of 300px width/height)
    width: 300, // Adjust this to set your desired scan frame size
    height: 300,
  },
  corner: {
    position: 'absolute',
    width: 30, // Length of each corner segment
    height: 30, // Thickness of each corner segment
    borderWidth: 3, // Border thickness of the corners
    borderColor: colors.primary, // Use your project's primary color here
  },
  topLeft: {
    top: 0,
    left: 0,
    borderRightWidth: 0,
    borderBottomWidth: 0,
    borderTopLeftRadius: 8, // Optional: adds rounded corners
  },
  topRight: {
    top: 0,
    right: 0,
    borderLeftWidth: 0,
    borderBottomWidth: 0,
    borderTopRightRadius: 8,
  },
  bottomLeft: {
    bottom: 0,
    left: 0,
    borderRightWidth: 0,
    borderTopWidth: 0,
    borderBottomLeftRadius: 8,
  },
  bottomRight: {
    bottom: 0,
    right: 0,
    borderLeftWidth: 0,
    borderTopWidth: 0,
    borderBottomRightRadius: 8,
  },
});

export default YourScannerComponent;

Customization Tips #

• Adjust Frame Size: Modify the width and height of scannerFrame, then update the transform values to half of those dimensions to keep the frame centered.
• Tweak Corner Style: Change width, height, and borderWidth in the corner style to adjust how thick/long the corners appear.
• Rounded Corners: Remove the borderRadius properties if you want sharp square corners instead.
• Add Scan Line (Optional): If you want the animated scan line effect, add an animated View inside scannerFrame and animate its top property to slide up and down.

内容的提问来源于stack exchange，提问作者joyce