react-native flatlist上拉加载onEndReached频繁触发怎么解决
这次给大家带来react-native flatlist上拉加载onEndReached频繁触发怎么解决，解决react-native flatlist上拉加载onEndReached频繁触的注意事项有哪些，下面就是实战案例，一起来看一下。
问题
在写flatlist复用组件时，调用的时候如果父组件是不定高的组件，会造成组件无法显示
如果父组件样式{flex：1}，则会出现下拉方法频繁触发或不正常触发的问题（我这里出现的问题是在列表第6个项目在底部时，缓慢上拉会多次触发flatlist的onEndReached监听）
原因
推测是因为{flex：1}不适合做动态高度组件的父组件样式，会错误的判断高度导致onEndReached多次不正常触发。
解决
可以把列表上方所需的组件做成header属性传入组件当做flatlist的头部组件，这样就可以直接调用封装好的组件。
也可以把父元素的样式设成{height: '100%'}，这样就可以正确的触发onEndReached监听。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是react-native flatlist上拉加载onEndReached频繁触发怎么解决的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
react native怎么更改版本
Jan 19, 2023 pm 02:31 PM
react native更改版本的方法：1、进入React Native项目目录，命令行输入“react-native --version”；2、查看npm包管理的React Native版本；3、打开项目中的“package.json”文件，修改dependencies字段，把“react-native”版本修改为目标版本即可。
react native红屏报错怎么办
Jan 03, 2023 pm 02:37 PM
react native红屏报错的解决办法：1、在“android/app/src/main/”中创建文件夹assets；2、执行命令“react-native bundle --platform android --dev false --entry-file index.android.js...”；3、在项目中执行“react-native run-android”即可。
react native更新失效怎么办
Jan 09, 2023 am 10:41 AM
react native更新失效的解决办法：1、直接把IPA包提交App Store审核，然后把IPA包upload到pushy平台；2、归档出的IPA包upload到pushy平台，然后把IPA包提交到iTunes connect；3、通过Xcode编译一个release模式的包到手机，然后用iTunes导出该IPA包，再upload该IPA到pushy平台即可。
react-native 运行不了怎么办
Dec 30, 2022 am 09:36 AM
react-native运行不了的解决办法：1、打开终端，cd到项目文件夹，然后输入“npm install jpush-react-native jcore-react-native --save”；2、把项目里面的“node_modules”文件夹删除掉；3、关掉端口8081对应的进程，重新运行项目。
react navigation报错怎么办
Dec 30, 2022 am 10:35 AM
react navigation报错的解决办法：1、配置“Stack.Navigator initialRouteName="Home"”，然后重启“yarn android”；2、删除“android\app\build\outputs\apk\debug”目录下的打包的apk文件，同时删除模拟器或真机上原有的apk包，然后重新执行“yarn android”即可。
react native路由跳转怎么实现
Jan 06, 2023 am 10:26 AM
react native路由跳转的实现方法：1、使用“yarn add react-navigation”命令安装“react-navigation”；2、通过“yarn add react-native-gesture-handler”命令安装“react-native-gesture-handler”组件；3、设置好初始路由，然后以类的组件的形式导出即可。
react native怎么设置页面背景色
Jan 03, 2023 am 10:31 AM
react native设置页面背景色的方法：1、通过“yarn add react-native-linear-gradient”安装“react-native-linear-gradient”组件；2、通过在页面设置“
react native 怎么捕捉错误
Jan 04, 2023 am 10:46 AM
react native捕捉错误的方法：1、打开相应的react文件；2、使用“require('ErrorUtils').setGlobalHandler(function(err) {...})”方法实现捕获错误，并给予用户合理的提示。
