Performance-Problem von FlatList in reagieren nativen

Question

Ich habe versucht, Flatlist, aber es hat ein bisschen Leistungsprobleme in Android.

1. Während ich scrolle, wird die Liste geladen. Aber danach zeigt es leer, während es nach oben scrollt.

2. Nachdem das Ende des Bildschirms erreicht wurde, hält es eine Weile an und lädt dann die Daten. Warum zeigt Loader (Aktivitätsanzeige) nicht unten an? Warum funktioniert onEndReached und onEndReachedThreshold nicht?

Plz haben einen Blick auf das Video here

https://youtu.be/5tkkEAUEAHM

Mein Code:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    FlatList, 
    ActivityIndicator, 
} from 'react-native'; 
import { List, ListItem, SearchBar } from "react-native-elements"; 

export default class FlatListExample extends Component 
{ 
constructor(props) { 
    super(props); 

    this.state = { 
     loading: false, 
     data: [], 
     page: 1, 
     seed: 1, 
     error: null, 
     refreshing: false, 
    }; 
    } 

    componentDidMount() { 
    this.makeRemoteRequest(); 
    } 

    makeRemoteRequest =() => { 
    const { page, seed } = this.state; 
    const url = `https://randomuser.me/api/?seed=${seed}&page=${page}&results=20`; 
    console.log('url', url); 
    this.setState({ loading: true }); 

    setTimeout(()=>{ 
     fetch(url) 
     .then(res => res.json()) 
     .then(res => { 
      this.setState({ 
      data: [...this.state.data, ...res.results], 
      error: res.error || null, 
      loading: false, 
      refreshing: false 
      }); 
     }) 
     .catch(error => { 
      this.setState({ error, loading: false }); 
     }); 
    },0); 

    }; 

    renderFooter =() => { 
    if (!this.state.loading) return null; 

    return (
     <View 
     style={{ 
      paddingVertical: 20, 
      borderTopWidth: 1, 
      borderColor: "#CED0CE" 
     }} 
     > 
     <ActivityIndicator animating size="large" /> 
     </View> 
    ); 
    }; 

handleLoadMore =() =>{ 
    this.setState({ 
    page:this.state.page + 1, 
    },()=>{ 
    this.makeRemoteRequest(); 
    }) 
} 
    render() { 
    return (
     <FlatList 
     data={this.state.data} 
     renderItem={({ item }) => (
      <ListItem 
      roundAvatar 
      title={`${item.name.first} ${item.name.last}`} 
      subtitle={item.email} 
      avatar={{ uri: item.picture.thumbnail }} 
      /> 
     )} 
     keyExtractor={item => item.email} 
     ListFooterComponent={this.renderFooter} 
     onEndReached={this.handleLoadMore} 
     onEndReachedThreshold={50} 
     /> 
    ); 
    } 
} 

AppRegistry.registerComponent('FlatListExample',() => FlatListExample); 

Answer 1

ich bemerkt habe, dass man nicht initialNumToRender Einstellung sind. Aus der Dokumentation:

initialNumToRender: Anzahl

Wie viele Elemente in der anfänglichen Charge zu machen. Dies sollte reichen, um den Bildschirm aber nicht viel mehr zu füllen. Beachten Sie, dass diese Elemente niemals als Teil des gefensterten Renderings deaktiviert werden, um die wahrgenommene Leistung von Scroll-to-Top-Aktionen zu verbessern.

Sie möchten also abschätzen, wie viele Zellen Sie voraussichtlich zu einem bestimmten Zeitpunkt sehen können, und legen Sie dies fest. Ich würde auch empfehlen, wenn Sie nicht bereits auf die neueste react-native aktualisieren, die verschiedene Verbesserungen für die FlatList-Komponente enthält.