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

Question

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

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

这是我的代码。

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

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


const TomarFoto = () => {
  const tomarFoto = () => {
    ImagePicker.launchCamera({}, (response) => {
      console.log('Respuesta =', response);
      if (response.didCancel) {
        alert('Subida cancelada');
      } else if (response.error) {
        alert('Error encontrado: ', error);
      } else {
        const source = {uri:response.uri};
      }
    });
  };

 return (

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


export default TomarFoto;

当我在调试模式下拍照时，我获得的数据是：

Respuesta = {height: 3000, fileSize: 538811, 
data: "/9j/4R7KRXhpZgAATU0AKgAAAAgACgEQAAIAAAANAAAAhgExAA…BTmj2jnrRRQBXkwD1oGKKKAHA47CgsOlFFADJGxRRRTsB/9k=", 
path: "/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg", 
uri: "content://com.sinvirus.provider/root/storage/emula…es/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg",
…}data: "/9j/4R7KRXhpZgAATU0AKgAAAAgACgEQAAIAAAANAAAAhgExAA"
fileName: "image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"
fileSize: 538811
height: 3000
isVertical: true
latitude:  
longitude: 
originalRotation: 0
path: "/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"
timestamp: "2020-05-10T23:21:29Z"
type: "image/jpeg"
uri: "content://com.sinvirus.provider/root/storage/emulated/0/Pictures/image-bf1edaf0-350f-40d6-b1c3-cccc125e1368.jpg"
width: 3000__proto__: Object

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

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

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;

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

Show photo taken with React Native Image Picker

javascript

android

react-native

react-native-image-picker