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

Is this an issue with the library or my implementation?

示例代码似乎有问题。我注意到同样的事情，我的解决方案类似于 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有一个child就可以了。

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

react-native-camera (android): takePictureAsync() throws error

android

react-native

react-native-camera

react-native-android