Как добавить разделитель в FlatList после некоторой части данных? - PullRequest
Новая
       27

Как добавить разделитель в FlatList после некоторой части данных?

0 голосов
/ 16 мая 2019

Как добавить разделитель в React-Native FlatList после рендеринга некоторых данных?

Я пытался использовать React-Native SectionList, но я не могу добавить функцию fetchNext, как в FlatList.

Это мой текущий код 

<FlatList
  data={data}
  keyExtractor={keyExtractor}
  renderItem={renderItem}
  fetchNext={fetchNextPage}
  numColumns={2}
  ItemSeparatorComponent={<View style={this.separatorStyles} />}
  ListFooterComponent={isFetching && <LoaderView notExpand />}
/>

|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|
------------- (need add some separator)
|####| |####|
|####| |####|
|####| |####|

|####| |####|
|####| |####|
|####| |####|

Ответы [ 2 ]

1 голос
/ 23 мая 2019

Для целей документации я выложу более подробный ответ.Вот важный код: 

const data = [{ id: 1 }, { id: 2 }, { separator: true, id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }];

renderItem = ({ item }) => item.separator ? (
  <Text>-------- separator -------</Text>
) : (
  <Text>{`------${item.id}------`}</Text>
);

<FlatList
  renderItem={this.renderItem}
  data={data}
  numColumns={2}
/>

Обратите внимание, что если разделитель занимает всю ширину экрана, элемент 4 будет отображаться за пределами экрана.Вы можете визуализировать пустой View, например, после разделителя.

1 голос
/ 16 мая 2019

Вы можете легко достичь этого, изменив свои данные и создав более продвинутую функцию renderItem. Сначала мы начнем с изменения данных. Я использовал следующий пример данных: 

    data: [
        { id: '1'},{ id: '2'},{ id: '3'},{ id: '4'},{ id: '5'},{ id: '6'},{ id: '7'},{ id: '8'},{ id: '9'},{ id: '10'}
    ]

Теперь давайте изменим его, см. Комментарии к коду для объяснения: 

modifyData(data){
    const numColumns = 2; // we want to have two columns
    const separator = 4;  // after 4 elements we want to have a separator 
    var tmp = []; // temporary array to store columns
    var newData = [];
    data.forEach((val, index) => {
      // check if column is full, if yes push it to the new array
      if (index % numColumns  == 0 && index != 0){
        newData.push(tmp);
        tmp = [];
      }
      // inject separator element if necessary, we mark them with id: -1
      if ( index % separator == 0 && index != 0){
        newData.push({ id: -1 })
      }
       tmp.push(val);
    }); 
    if (tmp.length > 0){
        // add remaining elements
        newData.push(tmp);
    }
   return newData;
  }
  render() {
    // modify your data, afterwards pass it to the FlatList 
    const newData = this.modifyData(this.state.data);
    return (
      <View style={styles.container}>
       <FlatList
        data={newData}
        renderItem={({item, index}) => this.renderItem(item, index)}
       />
      </View>
    );
  }

Теперь данные выглядят так: 

    data: [
        [{ id: '1'},{ id: '2'}],[{ id: '3'},{ id: '4'}], {id: -1},[{ id: '5'},{ id: '6'}],[{ id: '7'},{ id: '8'}], { id: -1 },[{ id: '9'},{ id: '10'}]
    ]

Теперь мы улучшаем функцию renderItem: 

renderItem(item, index){
    // check if the current item is a separator
    if (item.id == -1){
      return (
        <View key={index} style={{flex: 1, flexDirection: 'row', justifyContent: 'center'}}>
            <Text> --------SEPERATOR -------- </Text>
        </View>
      )
    }
    // otherwise loop over array
    const columns = item.map((val, idx) => {
      return (
        <View style={{flex: 1, justifyContent: 'center'}} key={idx}>
          <Text style={{textAlign: 'center'}}> ID: {val.id} </Text>
        </View>
      )
    });
    return (
      <View key={index} style={{flexDirection: 'row', flex: 1}}>
        {columns}
      </View>
    )
  }

Выход:

demo

Рабочий пример:

https://snack.expo.io/SJBUZ4i2V

...