将扫描条码的类型或数据写入 REACT-NATIVE 上的文本输入

Question

这是我的 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!`);


  }
}

它只是提醒扫描代码的读取类型和数据。我想将此类型和数据写入文本框或文本输入。

道具

type (string) -- 相机朝向。使用 BarCodeScanner.Constants.Type 之一。使用 Type.front 或 Type.back。与 Camera.Constants.Type 相同。默认值：Type.back。

barCodeTypes (Array) -- 条码类型数组。用法：BarCodeScanner.Constants.BarCodeType。其中 codeType 是上面列出的之一。默认值：所有支持的条码类型。例如：barCodeTypes={[BarCodeScanner.Constants.BarCodeType.qr]}

onBarCodeScanned (function) -- 成功扫描条形码时调用的回调。回调提供了一个形状为 { type: BarCodeScanner.Constants.BarCodeType, data: string } 的对象，其中 type 是指被扫描的条码类型，data 是条码中编码的信息（在此如果是二维码，这通常是一个 URL）。

Answer 1

首先，我们将使用 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 -method:(我们必须对我们的对象进行字符串化。)

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)
  });
}; 
}

Answer 2

好吧，这个问题首先很不清楚，但我想我可能明白你的意思。因此，您想以某种文本形式显示条形码中的数据。为此，我们必须先改变几件事：

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

相反，我们将在构造函数中定义状态：

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

那么render方法就变成了这样：

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
    });
}

我想可能是这样。

Answer 3

已经共享的答案是这个问题的正确答案，我只是发送一个不同的解决方案，我们不需要使用构造函数。

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>
    );
  }
}