使用React Native Camera / Expo Camera捕获图像的延迟，设置'处理消息'？

Question

从用户拍摄照片到android处理图像的时间，我的应用程序存在很大的延迟。

[Android相机的Expo延迟问题已在这里得到解答：Delay on the capture of an image - React Native Camera / Expo Camera。

[我正在尝试查看skipProcessing上的takePictureAsync，以及是否可以为on processing设置回调？我想让用户知道正在发生的事情，或者他们可以尝试拍摄另一张照片（相机保持打开状态，直到处理完图像为止，这并不理想）。

这是我的代码：

export default class CameraComponent extends Component{
  constructor(props) {
    super(props)
  }

  render() {
    <Camera
      ref={(ref) => {
        this.camera = ref;
      }}
      type={Camera.Constants.Type.back}
    >
      <TouchableOpacity
        onPress={this.takePicture}
      >
        <View>
          <FontAwesome
            name="camera"
          />
        </View>
      </TouchableOpacity>
    </Camera>;
  }

  takePicture = async () => {
    const photo = await this.camera.takePictureAsync({
      skipProcessing: true,
    });

    this.props.navigation.navigate("CameraConfirm", {
      img_url: photo.img_url,
      img_base64: photo.img_base64,
    });
  }
}

我看不到文档中的任何内容，React Native可能有解决方法吗？我尝试设置状态，但是在takePictureAsync之后仍然会发生，因此没有任何效果。

Answer 1

我发现了一种使用camera2API和onPictureSaved的解决方法。文档说camera2API可能有问题，尽管到目前为止我还没有发现任何奇怪的事情。

代码现在看起来像这样：

export default class CameraComponent extends Component{
  constructor(props) {
    super(props)

    this.state = {
      is_photo_taken: false,
    };
  }

  render() {
    <Camera
      ref={(ref) => {
        this.camera = ref;
      }}
      type={Camera.Constants.Type.back}
      // add styling to show/hide camera:
      style={{
        display: this.state.is_photo_taken ? "none" : null,
      }}
      useCamera2Api={true} // add this line
    >
      <TouchableOpacity
        onPress={this.takePicture}
      >
        <View>
          <FontAwesome
            name="camera"
          />
        </View>
      </TouchableOpacity>
    </Camera>;

    // add loading element with conditional show/hide:
    <Text
      style={{
        display: !this.state.is_photo_taken ? "none" : null,
      }}
    >
      Loading image...
    </Text>
  }

  takePicture = async () => {
    const photo = await this.camera.takePictureAsync({
      onPictureSaved: this.setState({ is_photo_taken: true }), // add this line
      // remove skipProcessing
    });

    this.props.navigation.navigate("CameraConfirm", {
      img_url: photo.img_url,
      img_base64: photo.img_base64,
    });
  }
}

而且，由于现在正在使用onPictureSaved，因此它意味着“现在可以省略，如果不需要的话。

我在整个块周围使用显示/隐藏而不是三进制或&&，以避免从页面中丢失相机元素。如果在拍照后立即丢失相机元件，则它将无法继续并处理图像。

我希望这对某人有帮助。