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

【问题标题】：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",
]

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

【问题讨论】：

标签： reactjs json typescript react-native expo

【解决方案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>
);

【讨论】：