Как добавить загрузку большего количества записей с помощью Spinner в Реактив-родном FlatList (означает -10 - 10 записей) вручную не использовать серверную часть - PullRequest
Новая
       36

Как добавить загрузку большего количества записей с помощью Spinner в Реактив-родном FlatList (означает -10 - 10 записей) вручную не использовать серверную часть

0 голосов
/ 03 мая 2018

Привет, я разрабатываю пример приложения на основе FlatList, это мой код здесь. На самом деле я показал целые записи, как у меня есть 50 записей на мой счет. Но сейчас я показываю целых 50 записей. Но мне нужно показать 10 после добавления к 10 записям. Но я не знаю, как добавить в FlatList.

Вот мой код: 

<FlatList
                    data={this.state.profiles}
                    renderItem={({ item, index }) => this.renderCard(item, index)}
                    keyExtractor={item => item.id}
                    ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
                />


renderCard (profile, index) {
    console.log('rendercard', profile);
    //
    return (
        <View key={profile.id}>
            <ProfileCard
                profile={profile}
                style={styles.card}
                onPress={() => this.props.screenProps.rootNavigation.navigate('Profile', { profile: this.state.profile, id: profile.id })}
                // onPress={() => alert('PROFILE')}
                onAddClick={() => this.setState({ connectionPageVisible: true, cardProfile: profile })}
                connectedIds={(this.props.screenProps && this.props.screenProps.connectedIds) || this.props.connectedIds}
            />
        </View>
    );
}

Пожалуйста, покажи мне загрузить больше записей с индикатором активности. Заранее спасибо

1 Ответ

0 голосов
/ 03 мая 2018

Если я правильно понял вашу проблему, то вы ищете infinite scrolling в Flatlist. Вы можете достичь этого с помощью атрибутов onEndReached и onEndThreshold.

Рассмотрим следующий прототип

Предполагается, что вы храните записи в this.state.profiles.

Получение новых записей с сервера

Установка начального номера страницы в конструкторе 

constructor(props){
   super(props);
   this.state = { page: 0}
}

Получение новых записей 

fetchRecords = (page) => {
    // following API will changed based on your requirement
    fetch(`${API}/${page}/...`)
    .then(res => res.json())
    .then(response => {
       this.setState({
           profiles: [...this.state.profiles, ...response.data] // assuming response.data is an array and holds new records
       });
    });
}

для обработки прокрутки 

onScrollHandler = () => {
     this.setState({
        page: this.state.page + 1
     }, () => {
        this.fetchRecords(this.state.page);
     });
}

Функция рендеринга 

render() {
    return(
        ...
        <FlatList
           data={this.state.profiles}
           renderItem={({ item, index }) => this.renderCard(item, index)}
           keyExtractor={item => item.id}
           ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
           onEndReached={this.onScrollHandler}
           onEndThreshold={0}
        />
        ...
    );
}

Локальные обновления

Если вы уже извлекли все данные, но хотите показать только 10 одновременно, то все, что вам нужно сделать, это изменить fetchRecords

fetchRecords = (page) => {
  // assuming this.state.records hold all the records
  const newRecords = []
  for(var i = page * 10, il = i + 10; i < il && i < this.state.records.length; i++){
      newRecords.push(this.state.records[i]);
  }
  this.setState({
    profiles: [...this.state.profiles, ...newRecords]
  });
}

При вышеуказанном подходе при извлечении записей будет отображаться Activity Indicator.

Надеюсь, это поможет!

...