Table of Contents
Reason
Solution
Home Web Front-end JS Tutorial How to solve the problem of frequent triggering of react-native flatlist pull-up loading onEndReached

How to solve the problem of frequent triggering of react-native flatlist pull-up loading onEndReached

Mar 19, 2018 pm 04:26 PM
react-native

This time I will bring you react-How to solve the problem of frequent triggering of onEndReached in react-native flatlist pull-up loading. What are the precautions , the following is a practical case, let’s take a look.

Problem

When writing a flatlist reuse component, if the parent component is a component with a variable height when called, the component will not be displayed

If the parent component Style {flex: 1}, there will be problems with the pull-down method triggering frequently or abnormally (the problem I have here is that when the sixth item in the list is at the bottom, the slow pull-up will trigger the onEndReached listener of flatlist multiple times)

Reason

It is speculated that {flex: 1} is not suitable for the parent component style of dynamic height components, and will misjudge the height, causing onEndReached to be triggered abnormally multiple times.

Solution

You can make the required components above the list into headerAttributesThe incoming component is used as the header component of the flatlist, so that the encapsulated component can be called directly .

You can also set the style of the parent element to {height: '100%'}, so that the onEndReached listener can be correctly triggered.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to the php Chinese website Other related articles!

Recommended reading:

JavaScript Optimizing DOM

Vue’s Computed Properties

The above is the detailed content of How to solve the problem of frequent triggering of react-native flatlist pull-up loading onEndReached. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1675
14
PHP Tutorial
1278
29
C# Tutorial
1257
24
How to change the version of react native How to change the version of react native Jan 19, 2023 pm 02:31 PM

How to change the version of react native: 1. Enter the React Native project directory and enter "react-native --version" on the command line; 2. View the React Native version managed by npm package; 3. Open the "package.json" file in the project , modify the dependencies field and change the "react-native" version to the target version.

What to do if react native red screen error occurs What to do if react native red screen error occurs Jan 03, 2023 pm 02:37 PM

Solution to react native red screen error: 1. Create the folder assets in "android/app/src/main/"; 2. Execute the command "react-native bundle --platform android --dev false --entry-file index.android.js..."; 3. Execute "react-native run-android" in the project.

What to do if react native update fails What to do if react native update fails Jan 09, 2023 am 10:41 AM

Solution to react native update failure: 1. Directly submit the IPA package to the App Store for review, and then upload the IPA package to the pushy platform; 2. Upload the archived IPA package to the pushy platform, and then submit the IPA package to iTunes connect; 3. . Compile a release mode package to the mobile phone through Xcode, then use iTunes to export the IPA package, and then upload the IPA to the pushy platform.

What should I do if react-native cannot run? What should I do if react-native cannot run? Dec 30, 2022 am 09:36 AM

Solution to react-native not running: 1. Open the terminal, cd to the project folder, and then enter "npm install jpush-react-native jcore-react-native --save"; 2. Save the "node_modules" file in the project Delete the folder; 3. Close the process corresponding to port 8081 and re-run the project.

What to do if react navigation reports an error What to do if react navigation reports an error Dec 30, 2022 am 10:35 AM

Solution to react navigation error: 1. Configure "Stack.Navigator initialRouteName="Home"", and then restart "yarn android"; 2. Delete the packaged apk in the "android\app\build\outputs\apk\debug" directory file, delete the original apk package on the emulator or real machine, and then re-execute "yarn android".

How to implement react native routing jump How to implement react native routing jump Jan 06, 2023 am 10:26 AM

How to implement react native route jump: 1. Use the "yarn add react-navigation" command to install "react-navigation"; 2. Use the "yarn add react-native-gesture-handler" command to install "react-native-gesture- handler" component; 3. Set up the initial route and then export it as a class component.

How to set the page background color in react native How to set the page background color in react native Jan 03, 2023 am 10:31 AM

How to set the page background color in react native: 1. Install the "react-native-linear-gradient" component through "yarn add react-native-linear-gradient"; 2. By setting "<LinearGradient colors={['# on the page FFD801', '#FF8040', '#F75D59']} style= {...}" to achieve the background color.

How to catch errors in react native How to catch errors in react native Jan 04, 2023 am 10:46 AM

Methods for react native to capture errors: 1. Open the corresponding react file; 2. Use the "require('ErrorUtils').setGlobalHandler(function(err) {...})" method to capture errors and give the user reasonable prompts .

See all articles