如何使用react-native渲染大型动态列表视图

Question

我有一个CMS页面，其中可能包含商品或图片楼层。图像可能没有特定的比例或大小。 产品组件应支持添加到购物车。

我正在使用#include <array> #include <string> template <typename Char_Array_Holder> constexpr size_t GetSize(Char_Array_Holder holder) { // Iterate over format array and compute a value. constexpr std::string_view format = holder(); size_t count = 0; for (char c : format) { if (c == '%') { ++count; } } return count; } template <typename Char_Array_Holder> constexpr auto GetArray(Char_Array_Holder holder) { constexpr size_t arraySize = GetSize(holder); return std::array<char, arraySize>(); } #define hold(msg) []() { return msg; } int main(int argc, char** argv) { static_assert(GetArray(hold("hello")).size() == 0, "failed..."); static_assert(GetArray(hold("h%ello")).size() == 1, "failed..."); static_assert(GetArray(hold("h%el%%lo")).size() == 3, "failed..."); } 渲染这些数据。但是似乎这不是一个好选择，因为渲染过程非常缓慢，并且看起来主线程将在第一次渲染期间被阻塞。并且快速滚动时，会有一些空白块。

从Flipkart阅读FlatList的文档后，似乎鼓励每行使用一定的布局尺寸不是一个好选择，而我的地板图像却没有。

是否有建议使用RN渲染此类CMS页面？

Answer 1

FlatList 本身是一个慢组件。从内存的角度来看，它具有巨大的优势，但是执行起来很慢。

尝试对大型列表使用https://github.com/bolan9999/react-native-largelist软件包，这对我来说似乎更好。

Answer 2

@Shahen Hovhannisyan的回答是一个很好的建议。 但是考虑到react-native-largelist的比率和星级较低。我没有将其导入我们的项目中。

我的解决方案是继续使用react-native的FlatList。并且使用React.memo或使用PureComponent而不是Component包裹项目，以避免浪费渲染。我还为图像提供了一定的布局。以我的经验，这将增加FlatList的渲染体验。用Image代替react-native-fast-image也是有效的改进。这将导致较低的内存使用量和更好的缓存。顺便说一句，对于react-native 0.59，请使用react-native-fast-image 6.1.1作为最新版本，仅支持RN 0.60 +。