gpt4 book ai didi

javascript - 如何在二维码扫描仪中生成背景扫描线

转载 作者:行者123 更新时间:2023-12-05 07:26:27 27 4
gpt4 key购买 nike

下面是我的二维码扫描仪的完整代码

我的代码运行良好,但我想添加更多效果。

就像在背景中扫描一条扫描移动线时要生成的那样,从上到下移动绿色或红色线。我应该添加什么属性。

请帮助在 qrcodescanner 中添加更多属性。

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableOpacity,
Linking,
View,
Input,
Item,
Button,
AnimationEffect,
ReadableStreamReader,

} from 'react-native';

import { Dimensions } from "react-native";


import QRCodeScanner from 'react-native-qrcode-scanner';
//const SCREEN_HEIGHT = Dimensions.get("window").height;
//const SCREEN_HEIGHT=40;
//const SCREEN_WIDTH=Dimensions.get("window").width;
//const SCREEN_WIDTH=130;

export default class OpenTicket extends Component {


onSuccess(e) {
// console.log(e.data);
this.props.navigation.navigate('OpenApplianceIssue', {
data: e.data,
} );
}

Nextpage() {
// console.log(e.data);
this.props.navigation.navigate('OpenApplianceIssue');
}

onClickListener = () => {
this.props.navigation.navigate('OpenApplianceIssue');
}


static navigationOptions = {
title: 'Open Ticket',
};

render() {
return (

<View style= {{paddingTop:30, paddingBottom:0}}>
// below code is for QRCode scanner
<QRCodeScanner
onRead={this.onSuccess.bind(this)}
cameraProps={{captureAudio: false}}
reactivate = {true}
cameraType={AnimationEffect}
style={ReadableStreamReader}
//cameraStyle={{ height: SCREEN_HEIGHT }}
cameraStyle={{ width: 200, alignSelf:'center'}}




bottomContent={
<Text style={styles.buttonText} onPress={() => this.onClickListener()}>SCAN ITEM{'\n'}
</Text>
}
buttonText={
<Item style={{paddingBottom:10,alignSelf: 'center', justifyContent: 'center', alignItems: 'center'}}>
<Input placeholder='Enter serial number'/>
</Item>
}

/>
<Text>Hello Abhi</Text>

{/* <Item style={{paddingBottom:10,alignSelf: 'center', justifyContent: 'center', alignItems: 'center'}}>
<Input placeholder='Enter serial number'/>
</Item>

<Button full rounded light style={{backgroundColor: 'green', justifyContent: 'center', alignItems: 'center'}}
onPress={() => this.onClickListener()}>
<Text style={{color: 'white'}}>Go</Text>
</Button> */}
</View>

);

}
}

const styles = StyleSheet.create({
centerText: {
flex: 1,
fontSize: 18,
padding: 32,
color: '#777',
},
textBold: {
fontWeight: '500',
color: '#000',
},
buttonText: {
fontSize: 21,
color: 'rgb(0,122,255)',
},
buttonTouchable: {
padding: 16,
},
});

最佳答案

我会为 react-native-qrcode-scanner 尝试这些选项:

  • showMarker (用它来在相机扫描窗口上显示标记)

  • customMarker (传递一个 RN 元素/组件以将其用作自定义标记)

  • markerStyle (使用它向默认标记添加自定义样式)

更新:例如,尝试将此属性添加到您的 <QRCodeScanner>元素:

showMarker={true}

关于javascript - 如何在二维码扫描仪中生成背景扫描线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54289296/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com