显示使用 React Native Image Picker 拍摄的照片

Question

我正在学习一些有关 React Native 的知识，但出现了一个我无法解决的问题。

\n\n

我正在使用react-native-image-picker 我已经能够从我的设备拍摄照片，问题是我无法在设备屏幕上显示捕获的图像。

\n\n

这是我的代码。

\n\n

import React from \'react\';\nimport { Button, Image, View} from \'react-native\';\n\nimport ImagePicker from \'react-native-image-picker\';\n\n\nconst TomarFoto = () => {\n  const tomarFoto = () => {\n    ImagePicker.launchCamera({}, (response) => {\n      console.log(\'Respuesta =\', response);\n      if (response.didCancel) {\n        alert(\'Subida cancelada\');\n      } else if (response.error) {\n        alert(\'Error encontrado: \', error);\n      } else {\n        const source = {uri:response.uri};\n      }\n    });\n  };\n\n return (\n\n  <View style={{ flex: 1, alignItems: \'center\', justifyContent: \'center\' }}>\n    <Image\n      source={ uri:response.uri}\n      style={ { width: 300, height: 300 } }\n    />\n  <Button title="Adjuntar foto" onPress={tomarFoto} />\n</View>\n ); \n};\n\n\nexport default TomarFoto;\n

\n\n

当我拍照并处于调试模式时，我获得的数据是：

\n\n

Respuesta = {height: 3000, fileSize: 538811, \ndata: "/9j/4R7KRXhpZgAATU0AKgAAAAgACgEQAAIAAAANAAAAhgExAA\xe2\x80\xa6BTmj2jnrRRQBXkwD1oGKKKAHA47CgsOlFFADJGxRRRTsB/9k=", \npath: "/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg", \nuri: "content://com.sinvirus.provider/root/storage/emula\xe2\x80\xa6es/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg",\n\xe2\x80\xa6}data: "/9j/4R7KRXhpZgAATU0AKgAAAAgACgEQAAIAAAANAAAAhgExAA"\nfileName: "image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"\nfileSize: 538811\nheight: 3000\nisVertical: true\nlatitude:  \nlongitude: \noriginalRotation: 0\npath: "/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"\ntimestamp: "2020-05-10T23:21:29Z"\ntype: "image/jpeg"\nuri: "content://com.sinvirus.provider/root/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"\nwidth: 3000__proto__: Object\n

\n\n

但这是我的问题，我想在视图中显示该照片，但每次我收到此错误消息时，\n

\n\n

知道如何解决这个问题或者我做错了什么吗？

\n

Answer 1

由于错误告诉您变量response尚未定义，当您使用react-native-image-picker库选择照片时，将为您提供选定的图像或用相机拍摄的照片，因此您渲染它的方式就像使用useState钩子，所以你可以这样做：

import React, {useState, useCallback} from 'react';
import { Button, Image, View} from 'react-native';

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


const TomarFoto = () => {
  const [photo, setPhotoURI] = useState(null);
  const tomarFoto = useCallback(() => {
    ImagePicker.launchCamera({}, (response) => {
      console.log('Respuesta =', response);
      setPhotoURI(response.uri); // update the local state, this will rerender your TomarFoto component with the photo uri path.
      if (response.didCancel) {
        alert('Subida cancelada');
      } else if (response.error) {
        alert('Error encontrado: ', error);
      } else {
        const source = {uri:response.uri};
      }
    });
  }, [setPhotoURI]);

 return (

  <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
    {photo && (
      <Image
        source={{ uri: photo }}
        style={ { width: 300, height: 300 } }
      />
    )}
  <Button title="Adjuntar foto" onPress={tomarFoto} />
</View>
 ); 
};


export default TomarFoto;