react-native-camera (android): takePictureAsync() 抛出错误

Posted 2023-03-11

【中文标题】react-native-camera (android): takePictureAsync() 抛出错误

【英文标题】：react-native-camera (android): takePictureAsync() throws error

【发布时间】：2020-01-10 18:24:18

【问题描述】：

从 react-native-camera 调用 takePictureAsync() 后，我收到此错误：

  "framesToPop": 1,
  "nativeStackandroid": [],
  "userInfo": null,
  "message": "Preview is paused - resume it before taking a picture.",
  "code": "E_TAKE_PICTURE_FAILED",
  "line": 2131,
  "column": 45,
  "sourceURL": "http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false"

所以我在调用 takePictureAsync() 之前尝试使用 resumePreview() 方法，现在我收到了不同的错误消息：

  "framesToPop": 1,
  "nativeStackAndroid": [],
  "userInfo": null,
  "message": "takePicture failed",
  "code": "E_TAKE_PICTURE_FAILED",
  "line": 2131,
  "column": 45,
  "sourceURL": "http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false"

我的组件和用法和https://react-native-community.github.io/react-native-camera/docs/rncamera的一样

    <RNCamera
      ref=ref => 
        this.camera = ref;
      
      style=styles.preview
      type=RNCamera.Constants.Type.back
      flashMode=RNCamera.Constants.FlashMode.on
      androidCameraPermissionOptions=
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      
      androidRecordAudioPermissionOptions=
        title: 'Permission to use audio recording',
        message: 'We need your permission to use your audio',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      
      onGoogleVisionBarcodesDetected=( barcodes ) => 
        console.log(barcodes);
      
    />




takePicture = async () => 
    if (this.camera) 
      const options =  quality: 0.5, base64: true ;
      try 
        this.camera.resumePreview();
        const data = await this.camera.takePictureAsync(options);
        console.log(data.uri);
       catch (error) 
        console.log(JSON.stringify(error, null, 2));
      
    
  ;

版本：

"react-native": "0.61.2",
"react-native-camera": "git+https://[e-mail]/react-native-community/react-native-camera.git",

在 ios 上运行良好。 这是图书馆或我的实现的问题吗？

【参考方案1】：

尽量使用组件作为FaCC（Function as Child Components）！这种方式对我有用。

const PendingView = () => (
  <View
    style=
      flex: 1,
      backgroundColor: 'lightgreen',
      justifyContent: 'center',
      alignItems: 'center',
    
  >
    <Text>Waiting</Text>
  </View>
);

class ExampleApp extends PureComponent 
  render() 
    return (
      <View style=styles.container>
        <RNCamera
          style=styles.preview
          type=RNCamera.Constants.Type.back
        >
          ( camera, status, recordAudioPermissionStatus ) => 
            if (status !== 'READY') return <PendingView />;
            return (
              <View style= flex: 0, flexDirection: 'row', justifyContent: 'center' >
                <TouchableOpacity onPress=() => this.takePicture(camera) style=styles.capture>
                  <Text style= fontSize: 14 > SNAP </Text>
                </TouchableOpacity>
              </View>
            );
          
        </RNCamera>
      </View>
    );
  

  takePicture = async function(camera) 
    const options =  quality: 0.5, base64: true ;
    const data = await camera.takePictureAsync(options);
    //  eslint-disable-next-line
    console.log(data.uri);
  ;


const styles = StyleSheet.create(
  container: 
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black',
  ,
  preview: 
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
  ,
  capture: 
    flex: 0,
    backgroundColor: '#fff',
    borderRadius: 5,
    padding: 15,
    paddingHorizontal: 20,
    alignSelf: 'center',
    margin: 20,
  ,
);

【参考方案2】：

这是库的问题还是我的实现问题？

示例代码似乎有问题。我注意到同样的事情，我的解决方案类似于FredVieira，但不使用 FaCC。除非 RNCamera 组件有子组件，否则摄像头似乎不会在 Android 上恢复。因此，如果您将示例从

<RNCamera ... /> 
<View ...>
          <TouchableOpacity ...>
            <Text style= fontSize: 14 > SNAP </Text>
          </TouchableOpacity>
 </View>

到

<RNCamera ...>
<View ...>
          <TouchableOpacity ...>
            <Text style= fontSize: 14 > SNAP </Text>
          </TouchableOpacity>
 </View>
</RNCamera>

它应该工作。所以你可以使用一个函数或一个组件，只要 RNCamera 有一个孩子。