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

Question

从 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://git@github.com/react-native-community/react-native-camera.git",

在 iOS 上运行良好。 这是图书馆的问题还是我的实现？

Answer 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,
  },
});

Answer 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 有一个孩子。