为什么在React Native中导航时Expo Camera会失败?

时间:2019-12-07 03:52:56

标签: react-native react-native-android react-navigation

我正在使用博览会Camera来构建QR码扫描仪。我依靠反应导航来绕过底部的应用程序选项卡。扫描条形码后,我会自动导航到其他选项卡。当我返回扫描仪时,相机被冻结。当我使用BarCodeScanner时,它可以工作,但是我失去了在完整代码中添加的缩放功能。

不确定发生了什么,是否有明显的错误?

以下是具有条形码功能的基本相机代码:

import * as React from 'react';
import { Text, View, StyleSheet, Button,  Animated, TouchableOpacity, TextInput, Image, Slider } from 'react-native';
import * as Permissions from 'expo-permissions';
import { BarCodeScanner } from 'expo-barcode-scanner';
import { Camera } from 'expo-camera';


export default class BarcodeScannerExample extends React.Component {
  state = {
    hasCameraPermission: null,
    scanned: false,
    modalVisible: false,
    data: null,
    zoom: 0
  };

  async componentDidMount() {
    this.getPermissionsAsync();
  }

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

  onValueChange(value) {
    this.setState({ zoom: value });
  }

  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={styles.container}>

        <Camera
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={StyleSheet.absoluteFillObject}
          zoom={this.state.zoom}
        />

             {scanned && (
          <Button title={'Tap to Scan Again'} onPress={() => this.setState({ scanned: false })} />
        )}
      </View>

    );
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ scanned: true, modalVisible: true, zoom:0 });
    this.props.navigate('Queue')
    alert(`Bar code with type ${type} and data ${data} has been scanned!`);
  };
}

我依靠反应导航来导航。这是我传递道具的地方:

import Qreader from './qReader';

export default class Home extends React.Component {

  render() {
    const { navigate } = this.props.navigation;
    return (
      <React.Fragment>
        <Qreader navigate={navigate}/>
      </React.Fragment>

    );
  }
}

0 个答案:

没有答案