react instascan

反應 Instascan

將 Instascan 庫移植到 React

警告

該庫使用instascan-umd而不是instascan作為每個依賴項。如果您要升級到較新的版本，則必須安裝istascan-umd 。

安裝中

新專案管理

npm install react-instascan react instascan-umd --save

紗

yarn add react-instascan react instascan-umd

使用 unpkg CDN

 < script type =" application/javascript " src =" https://unpkg.com/react-instascan/dist/main.js " > </ script > 

要求

要使用這個庫你至少要：

• 反應 >= 16.3
• instascan-umd >= 1

使用它

輸入

React Instascan 公開了兩個元件： Cameras和Scanner 。
使用 ESModule：

 import { Cameras , Scanner } from "react-instascan" ;

或使用 CommonsJS：

 const { Cameras , Scanner } = require ( "react-instascan" ) ;

「Cameras」元件附有渲染道具，將取得裝置上可用的相機。
掃描器組件接收相機作為道具，並接收VideoHTMLElement作為子元素。然後在讀取程式碼時會呼叫onScan監聽器。其他事件類型也可用（查看 API 表）：

 < Cameras >
  { cameras => (
    < div >
      < h1 > Scan the code! < / h1 >
      < Scanner camera = { cameras [ 0 ] } onScan = { onScan } >
        < video style = { { width : 400 , height : 400 } } / >
      < / Scanner >
    < / div >
  ) }
< / Cameras >

掃描器屬性

姓名	類型	描述
相機	目的	<Camera /> 傳回的相機對象
選項	目的	Instascan.Scanner 的相同選項
停止	布林值	如果 stop 為真，則相機停止，反之亦然
掃描時	功能	使用相機在連續模式下掃描二維碼時發出
啟動時	功能	當相機處於活動狀態且掃描已開始時調用
停止	功能	當相機和掃描停止時調用
啟動狀態	功能	當掃描器因停止變為錯誤或選項卡獲得焦點而變為活動狀態時發出
不活動狀態	功能	當掃描器因 stop 變為 true 或選項卡失去焦點而變為非活動狀態時發出

有關更多詳細信息，請查看 Instascan API

貢獻

直接從原始碼使用

儘管該專案附帶了一個簡單的範例，但您可能希望直接在程式碼中使用此程式碼來測試和修復可能的錯誤。為此，您只需連結此包即可

 yarn link

前往您的專案根目錄（應用程式的package.json所在的位置），然後使用連結的版本：

 yarn link react-instascan

現在只需在監視模式下啟動建置流程，您將看到專案中的即時變化

 yarn build --watch

有關貢獻的更多信息，請參閱貢獻指南

執照

該專案已獲得 MIT 許可