Как сгенерировать фоновую строку сканирования в сканере qrcode - PullRequest
Новая
       12

Как сгенерировать фоновую строку сканирования в сканере qrcode

0 голосов
/ 21 января 2019

Ниже приведен полный код сканера QRCode

мой код работает нормально, но я хочу добавить больше эффектов.

Как при сканировании одной сканируемой движущейся строки в фоновом режиме, которую нужно сгенерировать, как при перемещении сверху вниз зеленой или красной линии какие свойства я должен добавить.

, пожалуйста, помогите добавить больше свойств в 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,
      },
    });

1 Ответ

0 голосов
/ 21 января 2019

Я бы попробовал эти опции для response-native-qrcode-scanner :

  • showMarker (используйте для отображения маркера на камереокно сканирования)

  • customMarker (передать элемент / компонент RN, чтобы использовать его в качестве пользовательского маркера)

  • markerStyle (использоватьчтобы добавить собственный стиль в маркер по умолчанию)

ОБНОВЛЕНИЕ : Например, попробуйте добавить это свойство в элемент <QRCodeScanner>: 

showMarker={true}
...