如何在本机反应中显示相机胶卷图像文件名列表

Posted 2023-02-16

【中文标题】如何在本机反应中显示相机胶卷图像文件名列表

【英文标题】：How to display list of camera roll images filenames in react native

【发布时间】：2021-11-10 00:02:33

【问题描述】：

我正在尝试从用户相机胶卷中呈现图像列表。我正在使用 expo-media-library 调用 MediaLibrary.getAssetsAsync() 并首先显示我将用作图像数据源的文件名列表。 这是我的代码：

const recentCameraRoll = await MediaLibrary.getAssetsAsync(first: 10);
  const files = recentCameraRoll.assets;
  console.log('Files', Object.values(files.map(file => file.filename)))


  return (
      <View>
        Object.values(files).map(file => 
        const stringFile = file.filename;
        return (
        <Text key=stringFile>stringFile</Text>
        )
      )
      </View>
  );

我收到错误消息：错误：对象作为 React 子对象无效（找到：带有键 _U、_V、_W、_X 的对象）。如果您打算渲染一组子项，请改用数组。

我尝试过使用toString 和JSON.Stringify，但它总是返回相同的错误，我不知道为什么。 我的控制台日志回来了：

Files Array [
  "IMG_3975.PNG",
  "IMG_3971.PNG",
  "IMG_3914.PNG",
  "IMG_3913.PNG",
  "IMG_3880.PNG",
  "IMG_3879.HEIC",
  "IMG_3873.HEIC",
  "IMG_3870.HEIC",
  "IMG_3869.HEIC",
  "D181FCF1-D7D0-4896-B1EA-C760A6CCBF88.PNG",
]

这让我认为它仍然是一个数组，但我无法弄清楚。如果对此有任何帮助，或者如何将文件渲染为一般图像，那就太好了！谢谢！

【参考方案1】：

其中有一个await 的事实意味着你有一个async 渲染函数——所以它返回一个Promise。 React 无法做出承诺。您需要从渲染函数中删除 async，而是执行以下操作：

const [files, setFiles] = useState([]);
useEffect(() => 
    async function fetchAssets() 
      const recentCameraRoll = await MediaLibrary.getAssetsAsync(first: 10);
      setFiles(recentCameraRoll.assets);
    
    fetchAssets();
, []);

console.log('Files', Object.values(files.map(file => file.filename)))

return (
  <View>
    Object.values(files).map(file => 
      const stringFile = file.filename;
      return (
        <Text key=stringFile>stringFile</Text>
      );
  )
  </View>
);