запись типа или данных отсканированного штрих-кода в текстовые входы на REACT-NATIVE - PullRequest
Новая
       9

запись типа или данных отсканированного штрих-кода в текстовые входы на REACT-NATIVE

0 голосов
/ 04 ноября 2018

Вот мой файл App.js 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
  }

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({hasCameraPermission: status === 'granted'});
    }

  render() {
    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View style={{width: 500 , height:500}}>
        <BarCodeScanner
          onBarCodeScanned={this.handleBarCodeScanned}
          style={StyleSheet.absoluteFill}
        />
      </View>
    );
  }

  handleBarCodeScanned = ({ type, data }) => {

    alert(`Bar code with type ${type} and data ${data} has been scanned!`);


  }
}

это просто предупреждает тип чтения и данные отсканированного кода. Я хочу записать этот тип и данные в текстовые поля или текстовые входы.

Реквизит

тип (строка) - Облицовка камеры. Используйте один из BarCodeScanner.Constants.Type. Используйте либо Type.front, либо Type.back. То же, что и Camera.Constants.Type. По умолчанию: Type.back.

barCodeTypes (Array) - Массив типов штрих-кодов. Использование: BarCodeScanner.Constants.BarCodeType. где codeType является одним из перечисленных выше. По умолчанию: все поддерживаемые типы штрих-кодов. Например: barCodeTypes = {[BarCodeScanner.Constants.BarCodeType.qr]}

onBarCodeScanned (функция) - обратный вызов, который вызывается после успешного сканирования штрих-кода. Обратный вызов предоставляется с объектом формы {type: BarCodeScanner.Constants.BarCodeType, data: string}, где тип относится к сканированному типу штрих-кода, а данные - это информация, закодированная в штрих-коде (в этом случай QR-кодов, это часто URL).

Ответы [ 3 ]

0 голосов
/ 06 ноября 2018

Сначала мы определим конструктор с помощью super: 

constructor(props){
    super(props);
    this.state = { 
            hasCameraPermission: null,
            barcodeData: "",
            barcodeType: ""
    };
}

Тогда метод рендеринга такой же: 

render() {
      if (this.state.hasCameraPermission === null) {
        return <Text>Requesting for camera permission</Text>;
      } else if (this.state.hasCameraPermission === false) {
        return <Text>No access to camera</Text>;
      }
      return (
            <View style={{width: 500 , height:500}}>
              <BarCodeScanner
                onBarCodeScanned={this.handleBarCodeScanned.bind(this)}
                style={StyleSheet.absoluteFill}
              />
              <Text>Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been scanned!</Text>
            </View>
      );
  }

handleBarCodeScanned -метод: (Мы должны упорядочить наши объекты.) 

handleBarCodeScanned(type,data){
  this.setState({
        barcodeType : JSON.stringify(type),
        barcodeData : JSON.stringify(data)
  });
};

Есть целые коды записи данных и тип отсканированного штрих-кода в текст. 

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class BarcodeScannerExample extends React.Component {

  constructor(props){
    super(props);
    this.state = { 
            hasCameraPermission: null,
            barcodeData: "",
            barcodeType: ""
    };
}
  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({hasCameraPermission: status === 'granted'});
    }

    render() {
      if (this.state.hasCameraPermission === null) {
        return <Text>Requesting for camera permission</Text>;
      } else if (this.state.hasCameraPermission === false) {
        return <Text>No access to camera</Text>;
      }
      return (
            <View style={{width: 500 , height:500}}>
              <BarCodeScanner
                onBarCodeScanned={this.handleBarCodeScanned.bind(this)}
                style={StyleSheet.absoluteFill}
              />
              <Text>Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been scanned!</Text>
            </View>
      );
  }

handleBarCodeScanned(type,data){
  this.setState({
        barcodeType : JSON.stringify(type),
        barcodeData : JSON.stringify(data)
  });
}; 
}
0 голосов
/ 02 апреля 2019

уже предоставленный ответ является правильным для этого вопроса, я просто отправляю другое решение, в котором нам не нужно использовать функцию конструктора. 

import React from 'react';
import { Text, View } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';

export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    barcodeType: '',
    barcodeData: ''
  };

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === 'granted' });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({
      barcodeType: type,
      barcodeData: data
    });
    /*alert(`Bar code with type ${type} and data ${data} has been scanned!`);*/
  };

  render() {
    const { hasCameraPermission } = this.state;

    if (hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          width: 500,
          height: 500,
          backgroundColor: 'white',
          justifyContent: 'center',
          alignItems: 'center'
        }}
      >
        <BarCodeScanner
          onBarCodeScanned={this.handleBarCodeScanned}
          style={{ width: 300, height: 300 }}
        />
        <Text
          style={{
            display: 'flex',
            width: '75%',
            alignItems: 'center',
            flexWrap: 'wrap',
            padding: '2%'
          }}
        >
          Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been
          scanned!
        </Text>
      </View>
    );
  }
}

sample output

0 голосов
/ 04 ноября 2018

Хорошо, сначала вопрос был довольно неясен, но я думаю, что могу понять, что вы имеете в виду. Таким образом, вы хотите отобразить свои данные из штрих-кода в какой-либо текстовой форме. Для этого сначала нужно изменить пару вещей: 

state = {
   hasCameraPermission: null, //we don't need that.
}

Вместо этого мы собираемся определить состояние в конструкторе: 

constructor(props){
    this.state = { 
            hasCameraPermission: null,
            barcodeData: "",
            barcodeType: ""
    };
}

Тогда метод рендеринга становится таким: 

render() {
    if (this.state.hasCameraPermission === null) {
      return <Text>Requesting for camera permission</Text>;
    } else if (this.state.hasCameraPermission === false) {
      return <Text>No access to camera</Text>;
    }
    return (
          <View style={{width: 500 , height:500}}>
            <BarCodeScanner
              onBarCodeScanned={this.handleBarCodeScanned.bind(this)}
             style={StyleSheet.absoluteFill}
            />
            <Text>Bar code with type {this.state.barcodeType} and data {this.state.barcodeData} has been scanned!</Text>
          </View>
    );
}

Итак, теперь мы переходим к handleBarCodeScanned -методу: 

handleBarCodeScanned ( type, data )  {
    this.setState({
          barcodeType : type,
          barcodeData : data
    });
}

Я думаю, что это может быть.

...