React Native async/await 无法正常工作

Question

我想在执行 navigation.navigate() 之前选择照片，但是 async/await 不起作用。
我尝试将 Get_Image.js 中的 getphotoFromCamera 函数更改为异步函数，并将 await 代码添加到 launchCamera功能，但它没有工作。
非常感谢您的帮助！

get_image_page.js 的一部分 - 此功能将通过按下其中一个按钮来执行。

  async buttonPress(navigation, get_image_from_where, to_navigate){    // where : string, to_navigate : string
    
    const get_image = new Get_Image();
    let res;
    try{
      if(get_image_from_where == 'camera'){
        res = await get_image.getphotoFromCamera();     //this code is bothering me :(
      }else if(get_image_from_where == 'gallery'){
        res = await get_image.getphotoFromGallery();     //this code is bothering me :(

      }
    }catch(err){
      console.log(err);
    }
    console.log("image info : " + JSON.stringify(res));
    navigation.navigate(to_navigate, {image_info: res});
  }

Get_Image.js

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import Get_Permission from './Get_Permission'

export default class Get_Image {

    constructor(){
      this.res = false;
    }
  
    getphotoFromCamera(){
  
      const get_permission = new Get_Permission();
      
      const options = {
        mediaType: 'photo',
      };
      get_permission.requestCameraPermission();
      launchCamera(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(res));
          return res;
        }
      });
    }
    
    getphotoFromGallery(){
      const options = {
        mediaType: 'photo',
      };
      launchImageLibrary(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(this.res));
          return res;
        }
      });
    }
  }

Answer 1

import { launchCamera, launchImageLibrary } from 'react-native-image-picker';
import Get_Permission from './Get_Permission'

export default class Get_Image {
  constructor(){
    this.res = false;
  }
  
  getphotoFromCamera(){
    const get_permission = new Get_Permission();
    const options = { mediaType: 'photo' };
    get_permission.requestCameraPermission();
     
    return new Promise((resolve, reject) => {
      launchCamera(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(res));
          resolve(res); // changed from return to resolve
        }
      });
    });
  }
    
  getphotoFromGallery(){
    const options = { mediaType: 'photo' };
    
    return new Promise((resolve, reject) => {
      launchImageLibrary(options, (res) => {      //res is callback, https://github.com/react-native-image-picker/react-native-image-picker/blob/main/README.md#options.
        if (res.didCancel) {
          console.log('User cancelled image picker');
        } else if (res.error) {
          console.log('ImagePicker Error: ', res.error);
        } else if (res.customButton) {
          console.log('User tapped custom button: ', res.customButton);
          alert(res.customButton);
        } else {
          const source = { uri: res.uri };
          console.log('response', JSON.stringify(this.res));
          resolve(res); // changed from return to resolve
        }
      });
    })
  }
}

要使用 async/await，您需要在函数中返回 Promise。我将您的函数更改为返回Promise。以前它不返回任何内容。