Question

我正在尝试使用 Expo Camera 拍照和扫描条形码，但出于某种原因，每当我在 Android 设备上运行它时，当我将要使用相机时，应用程序就会崩溃。这是用于拍照/扫描条形码的代码。不过，我不认为这是代码问题：

import React, { useState, useEffect } from 'react';
import { Text, View, TouchableOpacity, Image, Alert } from 'react-native';
import { IconButton, Colors, Button } from 'react-native-paper'
import { Camera } from 'expo-camera';

const CustomBarcodeScanner = ({ handleBarCodeScanned, scanning, handleTakePhotos, handleGoBack }) => {
  const [hasPermission, setHasPermission] = useState(null)
  const [preview, setPreview] = useState(false)
  const [currentPhoto, setCurrentPhoto] = useState('')
  const [photoCount, setPhotoCount] = useState(0)

  const displaySnap = scanning ? "none" : "flex"

  const snap = async() => {
    if(this.camera){
      let photo = await this.camera.takePictureAsync({base64: true})
      setCurrentPhoto(photo['base64'])
      setPhotoCount(photoCount + 1)
      setPreview(true)
    }
  }

  const acceptPhoto = () => {
    setPreview(false)
    handleTakePhotos(currentPhoto)
    setCurrentPhoto('')
    console.log(photoCount)
    if(photoCount >= 2){
      handleGoBack()
      return
    }
    Alert.alert(
      "Tomar otra foto",
      "¿Desea tomar otra foto?",
      [
        {
          text: 'Sí',
          onPress: () => {
          }
        },
        {
          text: 'No',
          onPress: () => {
            handleGoBack()
          },
          style: "cancel"
        }
      ],
      { cancelable: false }
    )
  }

  const retakePhoto = () => {
    setPreview(false)
    setCurrentPhoto('')
  }

  useEffect(() => {
    (async () => {
      const { status } = await Camera.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })()
  }, [])

  if (hasPermission === null) {
    return <View />;
  }
  if (hasPermission === false) {
    return <Text>No access to camera</Text>;
  }
  return preview ? 
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Image style={{width: '100%', height: '70%'}} source={{ uri: `data:image/jpg;base64,${currentPhoto}` }} />
      <View style={{flexDirection: 'row'}}>
        <Button 
          mode='contained'
          color={Colors.purple500} 
          style={{padding: 10, margin: 10}}
          onPress={acceptPhoto}
        >
          Aceptar
        </Button>
        <Button
          mode='contained'
          color={Colors.purple500}
          style={{padding: 10, margin: 10}}
          onPress={retakePhoto}
        >
          Re-Tomar Foto
        </Button>
      </View>
    </View>
    :
    <View style={{ flex: 1 }}>
      <Camera
      style={{ flex: 1 }} type={Camera.Constants.Type.back} onBarCodeScanned={handleBarCodeScanned} ref={ref => {this.camera = ref}}>
        <View
          style={{
            flex: 1,
            backgroundColor: 'transparent',
            flexDirection: 'row',
          }}
          >
          <TouchableOpacity
            style={{
              flex: 0.1,
              alignSelf: 'flex-end',
              alignItems: 'center',
            }}
            onPress={handleGoBack}
          >
            <Text style={{ fontSize: 18, marginBottom: 10, color: 'white' }}>Regresar</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 0.8,
              alignSelf: 'flex-end',
              alignItems: 'center',
              display: displaySnap
            }}
            onPress={() => snap() }
          >
            <IconButton icon='camera' background={Colors.black} size={50} color={Colors.white} />
          </TouchableOpacity>
        </View>
      </Camera>
    </View>
}

export default CustomBarcodeScanner

我认为这可能与依赖有关？我不确定是否需要安装一些库或添加一些代码才能使其工作。我得到的错误是 Error while updating property 'nativeBackgroundAndroid' of a view managed by: RCTView

我的世博会版本是 4.1.6

Answer 1

显然这是具有波纹效果的可触摸元素的问题。人们正在讨论here。

react-native-paper 似乎在他们的按钮上实现了这一点。尝试使用 React-Native 的默认按钮，应该可以修复它:)

世博相机在 Android 设备上崩溃

1 个答案: