使用打字稿扫描答案

【问题标题】：Scandit using typescript使用打字稿扫描
【发布时间】：2022-08-12 22:19:40
【问题描述】：

我想将此repo(in this particular file) 转换为使用打字稿。我的问题是我对使用类不太熟悉。到目前为止，我已经这样做了，但是，我仍然遇到错误。

我面临的问题是scan 给出了错误“Property \'scan\' has no initializer 并且没有在构造函数中明确分配。\”以及之前使用的 Property \'scan\'被分配。以及viewRef 的类型似乎不正确。我还没有找到关于应该使用什么类型的任何信息。

有谁知道我做错了什么？

import React, { Component } from \"react\";
import { Alert, AppState, BackHandler } from \"react-native\";
import {
  BarcodeCapture,
  BarcodeCaptureOverlay,
  BarcodeCaptureOverlayStyle,
  BarcodeCaptureSettings,
  Symbology,
  SymbologyDescription,
  BarcodeCaptureListener,
} from \"scandit-react-native-datacapture-barcode\";
import {
  Camera,
  CameraSettings,
  DataCaptureContext,
  DataCaptureView,
  FrameSourceState,
  RectangularViewfinder,
  RectangularViewfinderStyle,
  RectangularViewfinderLineStyle,
  VideoResolution,
} from \"scandit-react-native-datacapture-core\";
import { styles } from \"./styles\";

import { requestCameraPermissionsIfNeeded } from \"./camera-permission-handler\";
import { SCANDIT_LICENSE_KEY } from \"../../assets/util/constants\";

interface Scandit {
  dataCaptureContext?: DataCaptureContext;
  viewRef?: DataCaptureView;
  barcodeCaptureMode: BarcodeCapture;
  camera?: Camera;
  barcodeCaptureListener?: BarcodeCaptureListener;
  overlay: BarcodeCaptureOverlay;
}

export class Scanner extends Component<Scandit> {
  scan: Scandit;
  constructor(props: Scandit) {
    super(props);
     this.scan = props;
    // Create data capture context using your license key.
    this.scan.dataCaptureContext = DataCaptureContext.forLicenseKey(SCANDIT_LICENSE_KEY);
    this.scan.viewRef = React.createRef();
  }

  componentDidMount() {
    AppState.addEventListener(\"change\", this.handleAppStateChange);
    this.setupScanning();
  }

  componentWillUnmount() {
    AppState.removeEventListener(\"change\", this.handleAppStateChange);
    if (this.scan.dataCaptureContext) this.scan.dataCaptureContext.dispose();
  }

  handleAppStateChange = async (nextAppState: string) => {
    if (nextAppState.match(/inactive|background/)) {
      this.stopCapture();
    } else {
      this.startCapture();
    }
  };

  startCapture() {
    this.startCamera();
    this.scan.barcodeCaptureMode.isEnabled = true;
  }

  stopCapture() {
    this.scan.barcodeCaptureMode.isEnabled = false;
    this.stopCamera();
  }

  stopCamera() {
    if (this.scan.camera) {
      this.scan.camera.switchToDesiredState(FrameSourceState.Off);
    }
  }

  startCamera() {
    if (!this.scan.camera) {
      // Use the world-facing (back) camera and set it as the frame source of the context. The camera is off by
      // default and must be turned on to start streaming frames to the data capture context for recognition.
      this.scan.camera = Camera.default;
      this.scan.dataCaptureContext.setFrameSource(this.scan.camera);

      const cameraSettings = new CameraSettings();
      cameraSettings.preferredResolution = VideoResolution.FullHD;
      this.scan.camera.applySettings(cameraSettings);
    }

    // Switch camera on to start streaming frames and enable the barcode capture mode.
    // The camera is started asynchronously and will take some time to completely turn on.
    requestCameraPermissionsIfNeeded()
      .then(() => {
        if (this.scan.camera) this.scan.camera.switchToDesiredState(FrameSourceState.On);
      })
      .catch(() => BackHandler.exitApp());
  }

  setupScanning() {
    // The barcode capturing process is configured through barcode capture settings
    // and are then applied to the barcode capture instance that manages barcode recognition.
    const settings = new BarcodeCaptureSettings();

    // The settings instance initially has all types of barcodes (symbologies) disabled. For the purpose of this
    // sample we enable a very generous set of symbologies. In your own app ensure that you only enable the
    // symbologies that your app requires as every additional enabled symbology has an impact on processing times.
    settings.enableSymbologies([
      Symbology.EAN13UPCA,
      Symbology.EAN8,
      Symbology.UPCE,
      Symbology.QR,
      Symbology.DataMatrix,
      Symbology.Code39,
      Symbology.Code128,
      Symbology.InterleavedTwoOfFive,
    ]);

    // Some linear/1d barcode symbologies allow you to encode variable-length data. By default, the Scandit
    // Data Capture SDK only scans barcodes in a certain length range. If your application requires scanning of one
    // of these symbologies, and the length is falling outside the default range, you may need to adjust the \"active
    // symbol counts\" for this symbology. This is shown in the following few lines of code for one of the
    // variable-length symbologies.
    const symbologySettings = settings.settingsForSymbology(Symbology.Code39);
    symbologySettings.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

    // Create new barcode capture mode with the settings from above.
    this.scan.barcodeCaptureMode = BarcodeCapture.forContext(this.scan.dataCaptureContext, settings);

    // Register a listener to get informed whenever a new barcode got recognized.
    this.scan.barcodeCaptureListener = {
      didScan: (_: any, session: { newlyRecognizedBarcodes: any[] }) => {
        const barcode = session.newlyRecognizedBarcodes[0];
        const symbology = new SymbologyDescription(barcode.symbology);

        // The `alert` call blocks execution until it\'s dismissed by the user. As no further frames would be processed
        // until the alert dialog is dismissed, we\'re showing the alert through a timeout and disabling the barcode
        // capture mode until the dialog is dismissed, as you should not block the BarcodeCaptureListener callbacks for
        // longer periods of time. See the documentation to learn more about this.
        this.scan.barcodeCaptureMode.isEnabled = false;

        Alert.alert(
          \"null\",
          `Scanned: ${barcode.data} (${symbology.readableName})`,
          [{ text: \"OK\", onPress: () => (this.scan.barcodeCaptureMode.isEnabled = true) }],
          { cancelable: false }
        );
      },
    };

    this.scan.barcodeCaptureMode.addListener(this.scan.barcodeCaptureListener);

    // Add a barcode capture overlay to the data capture view to render the location of captured barcodes on top of
    // the video preview, using the Frame overlay style. This is optional, but recommended for better visual feedback.
    this.scan.overlay = BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
      this.scan.barcodeCaptureMode,
      this.scan.viewRef.current,
      BarcodeCaptureOverlayStyle.Frame
    );
    this.scan.overlay.viewfinder = new RectangularViewfinder(RectangularViewfinderStyle.Square, RectangularViewfinderLineStyle.Light);

    this.scan.overlay = this.scan.overlay;
  }

  render() {
    return <DataCaptureView style={styles.container} context={this.scan.dataCaptureContext} ref={this.scan.viewRef} />;
  }
}

我认为您需要在构造函数中将类属性this.scan 设置为props。在设置其他属性之前。

标签： typescript react-native class scandit

【解决方案1】：

你让这个工作了吗？如果是这样，你能告诉我出了什么问题吗？

【讨论】：