世博会相机在 Android 设备上崩溃

Posted 2023-02-19

【中文标题】世博会相机在 Android 设备上崩溃

【英文标题】：Expo Camera crashing on Android devices

【发布时间】：2021-05-27 06:21:11

【问题描述】：

我正在尝试使用 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

我的expo版本是4.1.6

【问题讨论】：

有些人在这里遇到了 Touchable 元素的问题：github.com/facebook/react-native/issues/29414

您可以尝试使用 React-Native 中的默认按钮，而不是 react-native-paper 中的那些。也许这引发了问题

@ThalesKenne 解决了！我得想办法代替图标按钮，但谢谢！

太棒了！我还能获得奖励吗？ :O

@ThalesKenne 将您的解决方案发布为答案，以便您获得支持和赏金。

【参考方案1】：

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

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