代码之家 › 专栏 › 技术社区 › Rom Shiri

ReactNative FlatList一次呈现所有项?

react-native-flatlist react-native

Rom Shiri · 技术社区 · 9 年前

即使单元格在屏幕上实际上不可见,平面列表似乎也会同时呈现所有项目。

<FlatList data={this.props.items} 
          keyExtractor={(item, index) => generateKey()}
         renderItem={this.renderStrip}/>

 renderItem = ({item}) => { 
   console.warn('rendered!');
   return <View style={{height:200, height: 100}} />
}

我错过什么了吗?它不会降低性能吗?
我希望它只能在即将显示的时候渲染一个项目。

3 回复 | 直到 9 年前

suther 7 年前

我的一个应用程序也有同样的问题。我花了几个小时来解决这个问题。

TDLR; 请注意,您没有将平面列表嵌套在滚动列表(或其他类型的列表)中。

详细说明:

问题

与线程开启器相同,首先,我的平面列表只渲染我在中定义的渲染量 initialNumToRender ,但紧接着,应用程序开始渲染列表的其余部分。

环境

native-base.io 作为UI库并用组件封装屏幕的内容

解决方案

<Content> 替换滚动列表。滚动列表中的扁平列表将引导您获得奇怪的结果。 <View> ,一切正常。

naqvitalha 9 年前

平面列表提前渲染了太多的项目,以获得更好的填充率。我们也有类似的问题。我们构建RecyclerListView来解决这些问题。与RecyclerView非常相似,但它只是JS。它比Flipkart的平板电脑和战斗测试更快。你可以试试。

链接: https://github.com/Flipkart/ReactEssentials

https://medium.com/@naqvitalha/recyclerlistview-high-performance-listview-for-react-native-and-web-e368d6f0d7ef

-1

EnriqueDev 9 年前

因此它不会一次渲染所有项目。

推荐文章

theDC · 平面列表单选单元格

8 年前

Md Nahid Hasan · 如何在react原生平面列表中精确定位项目并隐藏某些内容?

8 年前

j_d · 如何使用React Native FlatList设置重新排序动画?

8 年前

johanjohansson · 如何在平面列表中交替颜色(React Native)

8 年前

arnoldbird · 我的平面列表似乎不需要密钥抽取器——为什么?

8 年前

KaplanAlex · React Native FlatList-使用动态大小呈现列表项

8 年前

Sandro_V · 对FlatList的React本机引用不起作用

8 年前

Saeid · 在react native中不调用平面列表中的函数

8 年前

Corrado · ReactNative平面列表-RenderItem不工作

8 年前

Adnan Ali · ReactNative android应用程序中的慢速动画

8 年前