无法显示来自反应本机视觉相机的临时文件的图像

Question

我正在通过构建一个可以拍照并在图库中显示图像的应用程序来学习 React Native。

我用来react-native-vision拍照并按照此答案react-native-fs中的建议访问临时文件，并将其用作uri<Image/>

但是，应该显示列表的视图</Image>显示空白

这是我的代码：

// saves photo on Array and closes the Camera View

const onPressButton = async () => {
    console.log(cameraRef.current);
    console.log(123);
    const photo = await cameraRef.current.takePhoto({
      flash: 'off',
      qualityPrioritization: 'speed',
    });

    console.log(photo);

    setPhotos([...photos, photo]);

    setShowCamera(false);
    return;
  };

   // how I'm trying to render the photos
      {photos && photos.length > 0 && (
    <View style={{width: '50%', height: '50%'}}>
    {photos.map((photo, index) => (
      <View key={index}>
        {console.log('file://' + DocumentDirectoryPath + photo.path)}
         <Image style={{maxWidth: 10, maxHeight: 20}} source={{uri: 'file://' + DocumentDirectoryPath + photo.path}} /> 
      </View>
    ))}
    </View>
  )}

它看起来是这样的：

我的代码有问题吗？

谢谢您的帮助。

Answer 1

您的源代码中有2 个潜在错误。

1. 由react-native-vision拍摄的照片被缓存。（photo.path 看起来像这样：/data/user/0/your.app/cache/mrousavy6472....jpg）所以不要使用 DocumentDirectoryPath，只使用source={{uri: 'file://' + photo.path}}
2. 第二个潜在错误是您的照片未显示，因为他被隐藏起来。尝试像这样设置样式：style={{width: '100%', height: '100%'}}

所以最终看起来像这样：

<Image style={{width: '100%', height: '100%'}} source={{uri: 'file://' + photo.path}} />