React Native 动态要求（图片）

Question

我正在编写一个类似于 coinmarketcap.com 的应用程序。 SectionList 中包含多达 700 个硬币和图标等的巨大列表。但在我的应用程序中，您可以选择要跟踪的硬币。

有没有办法不需要所有 700 个图标而只需要选定的图标？ 现在我有一个 objects.js 文件：

export const IMAGES = {
  'btc-usd': require('../icons/bitcoin.png'), //statically analyzed
  'eth-usd': require('../icons/ether.png'),
   ...

但我担心内存和性能。 React 是否将它们全部加载到 RAM 中？或者只是在它渲染的时候？ 非常感谢您的帮助

找到了这个解决方案，但不确定它在技术上是否更有效：

我发现一个简单的解决方案是创建一个非常简约的 package.json 在您要绝对导入的最顶层文件夹中 从。那个 package.json 应该是这样的： { "name": "src" }, 其中“src”是该文件夹的名称。

您可以像您一样简单地从 'src/X.js' 导入 X 正常的。

Source

非常感谢您的帮助！

Answer 1

您是否尝试过使用FlatList？它只会渲染视图中的项目以及前面的一些项目。它应该为您提供您所寻求的性能提升。至于懒惰地要求/加载图像，也许使用像react-native-lazyload这样的包。