在 React Native 中使用 react-native-qrcode-scanner 时如何在相机视图中添加文本

Question

我现在正在使用 react-native-qrcode-scanner 来读取二维码，但在尝试将文本添加到相机视图中时遇到了问题。（不是相机视图的顶部或底部，而是在它的内部 - 更确切地说是在标记位置下方并对齐中心）

The text is not displayed even though I add Text field with position: 'absolute'

import QRCodeScanner from 'react-native-qrcode-scanner';

  return (
    <QRCodeScanner
      onRead={onSuccess}
      reactivate={true}
      showMarker
      containerStyle={styles.cameraContainer}
      cameraStyle={{
        ...styles.camera,
        height: Dimensions.get('window').height - topOffset,
      }}
      topViewStyle={styles.topView}
      markerStyle={styles.marker}
      bottomViewStyle={styles.bottomView}
      cameraProps={{
        type: 'back',
      }}
    />
  );

const styles = StyleSheet.create({
  cameraContainer: {
    backgroundColor: theme.colors.background,
  },
  camera: {},
  bottomView: {
    height: 0,
    flex: 0,
  },
  topView: {
    height: 0,
    flex: 0,
  },
  marker: {
    borderWidth: 2,
    borderRadius: 10,
    borderColor: theme.colors.white,
  }
});

Answer 1

以下示例适用于 iOS：

/* eslint-disable react-native/no-color-literals */
// @ts-nocheck
import React from "react"
// eslint-disable-next-line react-native/split-platform-components
import { View, StyleSheet, TouchableOpacity, Text, ToastAndroid } from "react-native"
import QRCodeScanner from "react-native-qrcode-scanner"
import { RNCamera } from "react-native-camera"
import Clipboard from "@react-native-community/clipboard"

const styles = StyleSheet.create({
  cameraContainer: {
    flex: 1,
  },
  container: {
    backgroundColor: "#fff",
    flex: 1,
    height: "100%",
    width: "100%",
  },
  flash: {
    alignItems: "center",
    backgroundColor: "#CCC",
    borderRadius: 19,
    height: 38,
    justifyContent: "center",
    position: "absolute",
    right: 20,
    top: 20,
    width: 100,
    zIndex: 1,
  },
  markerStyle: {
    borderColor: "#ffffff",
    top: -40,
  },
})

export const BarcodeScannerScreen: React.FC = () => {
  const [flashOn, setFlashOn] = React.useState(false)

  const barcodeScanned = (barcode) => {
    ToastAndroid.show("Code copied to clipboard", ToastAndroid.LONG)
    Clipboard.setString(JSON.stringify(barcode.data))
    console.log("Barcode: ", barcode.data)
  }

  const toggleFlash = () => {
    setFlashOn(!flashOn)
  }

  const androidCameraPermissionOptions = {
    title: "Camera permission required",
    message: "To test QR-Code scan camera permission is required",
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.flash} onPress={toggleFlash}>
        <Text>Flash on</Text>
      </TouchableOpacity>
      <QRCodeScanner
        onRead={barcodeScanned}
        cameraProps={{
          androidCameraPermissionOptions: androidCameraPermissionOptions,
          flashMode: flashOn
            ? RNCamera.Constants.FlashMode.torch
            : RNCamera.Constants.FlashMode.off,
          barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
          type: RNCamera.Constants.Type.back,
        }}
        showMarker={true}
        reactivate={true}
        reactivateTimeout={3000}
        cameraStyle={styles.cameraContainer}
        markerStyle={styles.markerStyle}
      />
      <View
        style={{
          position: "absolute",
          alignSelf: "center",
          top: 300,
          width: 50,
          height: 50,
          backgroundColor: "#ff00ff",
        }}
      >
        <Text>Text</Text>
      </View>
    </View>
  )
}
/* eslint-disable react-native/no-color-literals */
// @ts-nocheck
import React from "react"
// eslint-disable-next-line react-native/split-platform-components
import { View, StyleSheet, TouchableOpacity, Text, ToastAndroid } from "react-native"
import QRCodeScanner from "react-native-qrcode-scanner"
import { RNCamera } from "react-native-camera"
import Clipboard from "@react-native-community/clipboard"

const styles = StyleSheet.create({
  cameraContainer: {
    flex: 1,
  },
  container: {
    backgroundColor: "#fff",
    flex: 1,
    height: "100%",
    width: "100%",
  },
  flash: {
    alignItems: "center",
    backgroundColor: "#CCC",
    borderRadius: 19,
    height: 38,
    justifyContent: "center",
    position: "absolute",
    right: 20,
    top: 20,
    width: 100,
    zIndex: 1,
  },
  markerStyle: {
    borderColor: "#ffffff",
    top: -40,
  },
})

export const BarcodeScannerScreen: React.FC = () => {
  const [flashOn, setFlashOn] = React.useState(false)

  const barcodeScanned = (barcode) => {
    ToastAndroid.show("Code copied to clipboard", ToastAndroid.LONG)
    Clipboard.setString(JSON.stringify(barcode.data))
    console.log("Barcode: ", barcode.data)
  }

  const toggleFlash = () => {
    setFlashOn(!flashOn)
  }

  const androidCameraPermissionOptions = {
    title: "Camera permission required",
    message: "To test QR-Code scan camera permission is required",
  }

  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.flash} onPress={toggleFlash}>
        <Text>Flash on</Text>
      </TouchableOpacity>
      <QRCodeScanner
        onRead={barcodeScanned}
        cameraProps={{
          androidCameraPermissionOptions: androidCameraPermissionOptions,
          flashMode: flashOn
            ? RNCamera.Constants.FlashMode.torch
            : RNCamera.Constants.FlashMode.off,
          barCodeTypes: [RNCamera.Constants.BarCodeType.qr],
          type: RNCamera.Constants.Type.back,
        }}
        showMarker={true}
        reactivate={true}
        reactivateTimeout={3000}
        cameraStyle={styles.cameraContainer}
        markerStyle={styles.markerStyle}
      />
      <View
        style={{
          position: "absolute",
          alignSelf: "center",
          top: 300,
          width: 50,
          height: 50,
          backgroundColor: "#ff00ff",
        }}
      >
        <Text>Text</Text>
      </View>
    </View>
  )
}

在 React Native 中使用 react-native-qrcode-scanner 时如何在相机视图中添加文本

How to add text inside of the Camera View when using react-native-qrcode-scanner in react native

react-native

text

camera

qr-code

barcode-scanner