отреагировать на функцию выбора изображений - PullRequest
Новая
       23

отреагировать на функцию выбора изображений

0 голосов
/ 22 мая 2019

Я пытаюсь создать возобновляемую функцию с помощью реагирующей на родную библиотеку ImagePicker, но когда я импортирую функцию, я получаю неопределенность от компонента, в который я ее импортировал. С console.log я вижу его на самом деле работает. он просто не показывает загруженное изображение.

Я попытался вернуть источник и функцию, но она не работает

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

      });
    }

  }

1 Ответ

2 голосов
/ 22 мая 2019

Если вы посмотрите на подпись функции showImagePicker из документов, вы увидите, что она не имеет возвращаемого значения:

статический showImagePicker (параметры ?, обратный вызов)

Причина, по которой вы все еще видите результаты из журнала консоли, заключается в том, что когда вы вызываете функцию showImagePicker, она вызывает вашу функцию обратного вызова асинхронно. Чтобы решить эту проблему, вы можете использовать обещание, подобное этому: 

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», что означает, что переменная данных приведет к исходному объекту результата из обещания

...