React Native Camera Kit 持续扫描二维码,并具有多个回调函数 `onReadCode`。

huangapple go评论82阅读模式
英文:

React native Camera Kit continuously scan Qr code with mutltiple callbacks onReadCode

问题

我需要在我的React Native项目中集成QR码扫描器,我正在使用插件react-native-camera-kit,这个插件支持QR码和条形码扫描,但当我扫描码时,它会不断扫描码并不断回调onReadCode={() => {}}函数。我需要从QR码中移除摄像头以停止它。

是否有办法只扫描QR码一次。

英文:

I need to integrate the QR code scanner for my project with react native, I'm using the plugin react-native-camera-kit, this plugin supports QR and Bar code scan but when i scan the code it continuously scan the code and call back the function onReadCode={()=>} the continuously. I need to remove the camera from QR code to stop it.

is that any way to scan the QR code only once.

<Camera
 showFrame={true}
 laserColor={Colors.green}
 frameColor="white"
 onReadCode={(event: any) => {
 console.log("event=>", event?.nativeEvent.codeStringValue)
 }}
 scanBarcode={true}
 style={{flex: 1}}
 />

答案1

得分: 2

Example 1: 这将在扫描条形码后停止扫描,直到再次将状态设置为true。

const [doScanBarcode, setDoScanBarcode] = useState(true);//添加这个状态
.
.
.
<Camera
 showFrame={true}
 laserColor={Colors.green}
 frameColor="white"
 onReadCode={(event: any) => {
   setDoScanBarcode(false);//在这里更新状态
   console.log("event=>", event?.nativeEvent.codeStringValue)
 }}
 scanBarcode={doScanBarcode}//在这里使用状态
 style={{flex: 1}}
/>

Example 2: 这将根据条件进行渲染,因此一旦扫描了代码,它将关闭相机并显示其他内容,比如一个显示代码已扫描的消息。

const [renderScanner, setRenderScanner] = useState(true);//添加这个状态
.
.
.
<>
 {
  renderScanner ?
   <Camera
     showFrame={true}
     laserColor={Colors.green}
     frameColor="white"
     onReadCode={(event: any) => {
       setRenderScanner(false);//在这里更新状态
       console.log("event=>", event?.nativeEvent.codeStringValue)
     }}
     scanBarcode={true}
     style={{flex: 1}}
  /> :
  <Text>代码已扫描</Text>
 }
</>

确保适当地进行样式设置并导入所需的内容。

Happy Coding React Native Camera Kit 持续扫描二维码,并具有多个回调函数 `onReadCode`。

英文:

You can create a state and update it once the code is scanned. You can either use the state value to change the prop value scanBarcode or you can completely remove the <Camera .../> and render something else like the content of the code.

Example 1: This will stop the barcode scanning once it is scanned until you again set the state to true.

const [doScanBarcode, setDoScanBarcode] = useState(true);//add this state
.
.
.
<Camera
 showFrame={true}
 laserColor={Colors.green}
 frameColor="white"
 onReadCode={(event: any) => {
   setDoScanBarcode(false);//update the state here
   console.log("event=>", event?.nativeEvent.codeStringValue)
 }}
 scanBarcode={doScanBarcode}//use the state here
 style={{flex: 1}}
/>

Example 2: This will render based on the condition so once the code is scanned it will close the camera and show some other content like a message which says the code is scanned.

const [renderScanner, setRenderScanner] = useState(true);//add this state
.
.
.
<>
 {
  renderScanner ?
   <Camera
     showFrame={true}
     laserColor={Colors.green}
     frameColor="white"
     onReadCode={(event: any) => {
       setRenderScanner(false);//update state here
       console.log("event=>", event?.nativeEvent.codeStringValue)
     }}
     scanBarcode={true}
     style={{flex: 1}}
  /> :
  <Text>The code is scanned</Text>
 }
</>

Make sure to style it properly and import the necessary things.

Happy Coding React Native Camera Kit 持续扫描二维码,并具有多个回调函数 `onReadCode`。

huangapple
  • 本文由 发表于 2023年7月20日 19:49:30
  • 转载请务必保留本文链接:https://go.coder-hub.com/76729552.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定