反应原生为图像选择器制作可重用的功能 [英] react native make reuseable function for image picker

问题描述

我正在尝试使用 react-native imagepicker 库创建一个可恢复的函数，但是当我导入该函数时，我从导入它的组件中得到了未定义的信息.使用 console.log 我看到它实际工作.它只是没有显示上传的图片.

I am trying to make a resuable fuction with the react-native imagepicker library but when i import the function i get undefined from the component i imported it to. With a console.log i see its actually working. it is just not showing the image uploaded.

我尝试返回源代码和实际功能，但它不起作用

I tried returning the source and the actually function but it doesnt work

helperfunction.js

helperfunction.js

import ImagePicker from 'react-native-image-picker';


export const photoUpload =()=>{
    const options = {
        title: 'Select Avatar',
        camera: [{ name: 'fb', title: 'Take a picture' }],
        storageOptions: {
          skipBackup: true,
          path: 'images',
        },
      };


     const action = ImagePicker.showImagePicker(options, (response) => {
        console.log('Response = ', response);

        if (response.didCancel) {
          console.log('User cancelled image picker');
        } else if (response.error) {
          console.log('ImagePicker Error: ', response.error);
        } else if (response.camera) {
          console.log('User tapped custom button: ', response.camera);
        } else {
          const source = { uri: response.uri };
          console.log(source)
           return  source; 

        }
      })
      return action;



}

App.js

import {photoUpload} from '../../../utilities/helper/photoUpload'

handlePhotoUpload =  async () =>{

    const data = await photoUpload()

    console.log(data) (this comes back undefined)
    if (data){
      this.setState({
        photo: data

      });
    }

  }

推荐答案

如果您查看文档中 showImagePicker 函数的签名，您会发现它没有返回值:

If you have a look at the signature of the showImagePicker function from the docs, you'll see it has no return value:

静态 showImagePicker(options?, callback)

static showImagePicker(options?, callback)

您仍然从控制台日志中看到结果的原因是，当您调用 showImagePicker 函数时，它正在异步调用您的回调函数.要解决此问题，您可以使用这样的承诺:

The reason you are still seeing results from the console log is that when you invoke the showImagePicker function it is calling your callback function asynchronously. To fix this issue, you can employ a promise like this:

export const photoUpload = () => {
    const options = {
        title: 'Select Avatar',
        camera: [{name: 'fb', title: 'Take a picture'}],
        storageOptions: {
            skipBackup: true,
            path: 'images',
        },
    };
    return new Promise(((resolve, reject) => {
        ImagePicker.showImagePicker(options, (response) => {
            if (response.didCancel) {
                reject('User cancelled image picker');
            } else if (response.error) {
                reject('ImagePicker Error: ', response.error);
            } else if (response.camera) {
                reject('User tapped custom button: ', response.camera);
            } else {
                const source = {uri: response.uri};
                resolve(source);
            }
        })
    }))
}

你可以让你的 app.js 保持不变，因为你已经在等待承诺解决，'await'意味着数据变量将产生来自承诺的源结果对象

You can leave your app.js the same as you are already waiting for the promise to resolve with 'await' meaning the data variable will result in the source result object from the promise

这篇关于反应原生为图像选择器制作可重用的功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！