Question

未处理的承诺拒绝：TypeError：null 不是对象（评估 camera.pictureSize）

2020-10-11

6969

typescript react-native expo react-native-ios expo-camera

我正在创建一个 react-native 应用以使用 expo-camera 模块。

因此，我将相机变量声明为

let camera: any = null;

我 从 return 传递对此的引用 为：

<Camera style = {{flex: 1, opacity: camOpacity}}
          type = {state.type}
          ratio = "2:1"
          ref = {async (ref) => (camera = ref)}>

但是，当我运行该应用时，它正常启动，但在尝试拍照时出现错误：

[Unhandled promise rejection: TypeError: null is not an object (evaluating 'camera.pictureSize')]

此错误发生在：

console.log(camera.pictureSize);

但它也发生在：

console.log(" --> Taking image");
    const opts = {
       skipProcessing: true,
       exif: false,
       quality: 0
    };
    let photo = await camera.takePictureAsync(opts);

来自 camera.takePictureAsync(opts) 部分，当我 注释掉console.log(camera.pictureSize);

由于某种原因，可能未检测到引用。

我的 package.json 是：

"dependencies": {
    "expo": "~39.0.2",
    "expo-2d-context": "0.0.2",
    "expo-asset": "~8.2.0",
    "expo-camera": "~9.0.0",
    "expo-gl": "~9.1.1",
    "expo-image-manipulator": "~8.3.0",
    "expo-permissions": "~9.3.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-web": "~0.13.12",
    "react-native-screens": "~2.10.1",
    "react-native-svg": "~12.1.0",
    "mem": "^8.0.0",
    "@unimodules/core": "~5.5.0"
  }

我读到在当前的 expo-camera 版本中存在一些此类错误，但即使我降级软件包和依赖项，它仍然存在。

任何帮助都将不胜感激。

编辑：

const photo = async (): Promise<CameraCapturedPicture> | undefined  => {
      if(camera){
        console.log(" --> Taking image");
        const opts = {
          skipProcessing: true,
          exif: false,
          quality: 0
        };
        return await camera.takePictureAsync(opts);
      }
    }
    
    console.log(" --> Resizing image");
    const {uri} = await ImageManipulator.manipulateAsync(
      photo.uri,
      [
        { resize: {width: 256, height: 512}},
        { crop: {originX: 0, originY: 128, width: 256, height: 256}}
      ]
    );

我根据 Linda 的建议更改了代码，但现在的错误是 Promise 不是有效类型，并且 photo.uri 没有 uri 属性

Answer 1

您已将 camera ref 对象初始化为 null 。因此，在对其调用任何函数之前，您需要验证它是否已实际设置为 Camera ，并且仍然不是 null 。我怀疑这是导致拍照功能出错的原因。请注意在文档中，他们在调用相机上的方法之前检查 if (this.camera) { 。

console.log(camera.pictureSize) 是错误的，即使相机不是 null ，因为该属性不存在。 pictureSize 是您传递给 Camera 组件的 prop。它不是相机实例上存在的属性。您应该查看文档。

除了使用 any ，您还可以将变量声明更改为 Camera | null ，这应该可以帮助您查看可用的属性和方法。

let camera: Camera | null = null;

您可以在调用拍照的方法中检查 camera 是否不为 null ：

const takePicture = async (): Promise<CameraCapturedPicture> | undefined => {
  if (camera) {
    console.log(" --> Taking image");
    const opts = {
      skipProcessing: true,
      exif: false,
      quality: 0
    };
    return await camera.takePictureAsync(opts);
  }
};

或者您可以在调用该方法之前进行检查，并将 camera 变量传递到该方法中，以便 typescript 知道它不是 null 。

const executeTakePicture = async (cam: Camera): Promise<CameraCapturedPicture> => {
  console.log(" --> Taking image");
  const opts = {
    skipProcessing: true,
    exif: false,
    quality: 0
  };
  return await cam.takePictureAsync(opts);
};

const maybeTakePicture = async (): Promise<CameraCapturedPicture> | undefined => {
  if (camera) {
    return await executeTakePicture(camera);
  } else {
    //...
  }
}