记一个开发中遇到react-native flatList 的坑

因項目需求封装了一个 View 作为 react native flatList 的 item, 在原生 View 有方法响应需要传递到到 RN, 然后出现一个闪退问题: 在滑到最后在滑回来, 滑到第一张有时候是第二张的时候, 单击(原生 View 的单击手势)的时候就会闪退, 同样的在 item 的数量多的时候都会出现这个问题, item 少的则不会.

后来在调试的时候发现原生的 View 为 nil, 于是想到可能是该 flatList 的 item 被回收了, 那怎么解决呢/

看了下 flatList 的属性, 他其实也是根据原生视图封装的, 虽然不懂他的机制 , 但肯定是存在复用机制的, 正好有一个属性

initialNumToRender

他本来的目的是渲染一开始的元素个数, 用来在最短的时间把内容呈现给用户, 但是后面的介绍很有意识, 在滑动的时候不会卸载这些一开始渲染的 item, 也就是说这些 item 从一开始渲染就不会被销毁, 那么我的原生 View 就不会变为 nil, 所以闪退就解决了

转载于:https://www.cnblogs.com/ChrisZhou666/p/8432940.html

记一个开发中遇到react-native flatList 的坑相关推荐

android开发rn插件,在Android原生应用中嵌入React Native
开发工具:Android Studio , WebStorm 参考链接:React Native官方中文文档一.创建React Native项目 1.在本地React Native项目目录下,创建一 ...
如何构建具有实时搜索功能的React Native FlatList
by Vikrant Negi 通过Vikrant Negi 如何构建具有实时搜索功能的React Native FlatList (How to build a React Native FlatL ...
移动端跨平台开发Flutter 与 React Native对比
移动端跨平台开发Flutter 与 React Native 深入对比分析 2019年6月21日20:41:35 发表评论 154 views 移动端跨平台在经历数年沉浮之后,如今还能在舞台聚光灯下雀 ...
手机app开发可选技术——React Native
百度百科 React Native是Facebook于2015年开源的跨平台移动应用开发框架,是Facebook早先开源的JS框架React在原生移动应用平台的衍生产物,支持IOS和安卓两大平台.RN ...
4、在已有的Android应用中使用React Native
这一篇记录的是如何在已有的Android应用中使用React Native,在官方的文档上也有介绍:http://reactnative.cn/docs/embedded-app-android.ht ...
linux平台安装React Native遇到的坑
3年前我在windows平台安装过React Native,我一直都记忆犹新,那个时候facebook刚推出支持安卓,然后花了一天的时间在自己的window电脑上配置好了,还是很兴奋的,安装博客地址如 ...
React Native FlatList优化
众所周知React Native刷新控件一般都是采用setState,对于FlatList来说就要想办法减少item的渲染,采用shouldComponentUpdate自己定义什么情况下执行刷新,有 ...
如何快速对接一个开发中的项目
工作上周项目组新来了几位技术大佬,过来负责带领我们做项目的重构.升级.完善等工作,在与我们这些菜鸟对接时候,主要关注了: 项目的各方面信息,通过项目组成员叙述.需求文档.汇报PPT.项目源代码.部署 ...
React Native 入门踩坑
开发环境搭建及环境变量配置开发rn第一步需要配置安卓环境 android studio下载地址: https://developer.android.google.cn/studio/archive ...

记一个开发中遇到react-native flatList 的坑

initialNumToRender

记一个开发中遇到react-native flatList 的坑相关推荐

最新文章

热门文章