英文:
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
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论