如何使用Expo在React Native中制作QR代码扫描仪

Question

当我运行https://snack.expo.io/@sushil62/qr-code-scanner in expo中的

import React, { Component } from 'react';
import { Alert, Linking, Dimensions, LayoutAnimation, Text, View, StatusBar, StyleSheet, TouchableOpacity } from 'react-native';
import { BarCodeScanner, Permissions } from 'expo';
export default class App extends Component {
  state = {
    hasCameraPermission: null,
    lastScannedUrl: null,
  };
  componentDidMount() {
    this._requestCameraPermission();
  }
  _requestCameraPermission = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermission: status === 'granted',
    });
  };
  _handleBarCodeRead = result => {
    if (result.data !== this.state.lastScannedUrl) {
      LayoutAnimation.spring();
      this.setState({ lastScannedUrl: result.data });
    }
  };
  render() {
    return (
      <View style={styles.container}>
        {this.state.hasCameraPermission === null
          ? <Text>Requesting for camera permission</Text>
          : this.state.hasCameraPermission === false
              ? <Text style={{ color: '#fff' }}>
                  Camera permission is not granted
                </Text>
              : <BarCodeScanner
                  onBarCodeRead={this._handleBarCodeRead}
                  style={{
                    height: Dimensions.get('window').height,
                    width: Dimensions.get('window').width,
                  }}
                />}
        {this._maybeRenderUrl()}
        <StatusBar hidden />
      </View>
    );
  }
  _handlePressUrl = () => {
    Alert.alert(
      'Open this URL?',
      this.state.lastScannedUrl,
      [
        {
          text: 'Yes',
          onPress: () => Linking.openURL(this.state.lastScannedUrl),
        },
        { text: 'No', onPress: () => {} },
      ],
      { cancellable: false }
    );
  };
  _handlePressCancel = () => {
    this.setState({ lastScannedUrl: null });
  };
  _maybeRenderUrl = () => {
    if (!this.state.lastScannedUrl) {
      return;
    }
    return (
      <View style={styles.bottomBar}>
        <TouchableOpacity style={styles.url} onPress={this._handlePressUrl}>
          <Text numberOfLines={1} style={styles.urlText}>
            {this.state.lastScannedUrl}
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.cancelButton}
          onPress={this._handlePressCancel}>
          <Text style={styles.cancelButtonText}>
            Cancel
          </Text>
        </TouchableOpacity>
      </View>
    );
  };
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
  },
  bottomBar: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
    padding: 15,
    flexDirection: 'row',
  },
  url: {
    flex: 1,
  },
  urlText: {
    color: '#fff',
    fontSize: 20,
  },
  cancelButton: {
    marginLeft: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
  cancelButtonText: {
    color: 'rgba(255,255,255,0.8)',
    fontSize: 18,
  },
});

如果有人建议我解决这个问题或给我一个例子(例如降级博览会版本(，那将是非常好的。

您可以使用

expo-barcode-scanner

运行expo install expo-barcode-scanner

用法

您必须在尝试获取它之前请求访问用户的相机。为此，您将需要使用权限API。您可以在下面的示例中看到这一点。

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  Button
} from 'react-native';
import Constants from 'expo-constants';
import * as Permissions from 'expo-permissions';
import {
  BarCodeScanner
} from 'expo-barcode-scanner';
export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    scanned: false,
  };
  async componentDidMount() {
    this.getPermissionsAsync();
  }
  getPermissionsAsync = async() => {
    const {
      status
    } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({
      hasCameraPermission: status === 'granted'
    });
  };
  render() {
    const {
      hasCameraPermission,
      scanned
    } = 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,
          flexDirection: 'column',
          justifyContent: 'flex-end',
        }
      } >
      <
      BarCodeScanner onBarCodeScanned = {
        scanned ? undefined : this.handleBarCodeScanned
      }
      style = {
        StyleSheet.absoluteFillObject
      }
      />
      {
        scanned && ( <
          Button title = {
            'Tap to Scan Again'
          }
          onPress = {
            () => this.setState({
              scanned: false
            })
          }
          />
        )
      } <
      /View>
    );
  }
  handleBarCodeScanned = ({
    type,
    data
  }) => {
    this.setState({
      scanned: true
    });
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };
}

注意：将未定义传递给Onbarcodescanned Prop将不会导致无扫描。这可以用来有效地"暂停"扫描仪，以便即使检索到数据后也不会不断扫描。

允许所有被弹出的许可。

你很好！

希望这会有所帮助。