изображение не инициализировано после захвата с использованием реакции native и expo

Question

Я пытаюсь отобразить изображение после того, как я его снял, прямо сейчас под камерой. Однако после того, как я возьму изображение, сама переменная изображения инициализируется равной: Promise { "_40": 0,"_55": null,"_65": 0,"_72":null,}, и uri / path изображения оба не определены. Функция _maybeRenderImage() предназначена для отображения изображения только после его инициализации с камеры.

Камера работает нормально, и я даже вижу окно, приспособленное к размеру изображения, но вместо изображения просто белый экран. Что я делаю неправильно? Будет ли это связано с асинхронным вызовом и функцией takePicture? Любая помощь приветствуется!

const StyledCenterView = styled(View)`
  justify-content: center;
  align-items: center;
  flex: 1;
`;

interface CameraState {
  permissionsGranted: boolean;
  image: any;
  type: any;
}

class CameraView extends React.Component<any, CameraState> {
  camera:any = null;

  constructor(props: any) {
    super(props);
    this.state = {
      permissionsGranted: null,
      image: null,
      type: Camera.Constants.Type.back,
    };
  }

  async componentWillMount() {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ permissionsGranted: status === 'granted' });
  }

  takePicture = () => {
    if (this.camera) {
      const photo = this.camera.takePictureAsync();
      console.log(photo.uri);
      console.log(photo.path);
      this.setState({ image: photo });
    }
  }

  _maybeRenderImage = () => {
    const { image } = this.state;
    if (image) {
      console.log('got an image!');
      return <Image
      source={{ uri: image.uri }}
        style={{ width: 250, height: 250 }} />;
    } else {
      console.log('no image in state');
    }
  }

  render() {
    const { permissionsGranted } = this.state;
    if (permissionsGranted === null) {
      return <Text>Access not asked for</Text>;
    } else if (permissionsGranted === false) {
      return <Text>Change permissions to allow camera usage!</Text>;
    } else {
      return(
      <View flex>
        <Camera
          ref={(ref:any) => {
            this.camera = ref;
          }}
          style={{ flex: 1 }}>
        </Camera>
        <TouchableOpacity
          onPress={this.takePicture}
          style={{ alignSelf: 'center' }}>
          <Ionicons name="ios-radio-button-on" size={70} color="black" />
        </TouchableOpacity>

        {this._maybeRenderImage()}

      </View>
      );
    }
  }
}

export default CameraView;

Answer 1

У меня была та же проблема сегодня, и я нашел этот вопрос (путем поиска в значениях результата, который я видел!). @ Комментарий Чернива верен, и я собираюсь переписать его как ответ для полноты (и в случае, если его jsfiddle уйдет).

takePictureAsync возвращает Обещание; самый простой способ решить эту проблему - использовать await, что означает, что вам нужно также настроить вашу takePicture функцию async, например:

takePicture = async () => {   // added "async" here
  if (this.camera) {
    const photo = await this.camera.takePictureAsync(); // added "await" here
    console.log(photo.uri);
    console.log(photo.path);
    this.setState({ image: photo });
  }
}