Использование React Native FlatList с двумя совершенно разными массивами данных - PullRequest
Новая
       1

Использование React Native FlatList с двумя совершенно разными массивами данных

0 голосов
/ 29 апреля 2018

У меня есть два массива, один для продуктов и один для супервизоров. Очевидно, что оба имеют очень разные типы данных. Я хочу создать прокручиваемый список, в котором будут отображаться все продукты, за которыми следуют все супервизоры, используя один список прокрутки. Это возможно с FlatList React Native? Если так, или если нет, как я могу это сделать?

В настоящее время я могу визуализировать один массив данных следующим образом: 

<FlatList
    data={this.state.products}
    renderItem={this.renderItem}
/>

Но как я могу добавить данные супервизоров в конец этого списка? Очевидно, что поскольку данные между двумя массивами сильно различаются, я не могу просто объединить массивы и / или одну и ту же функцию renderItem.

Как я могу отображать два совершенно разных типа данных один за другим в одном прокручиваемом списке?

1 Ответ

0 голосов
/ 29 апреля 2018

Вы можете объединить ваши данные и использовать один FlatList с одним реквизитом renderItem. Без примера ваших данных это небольшая игра в догадки, но ниже приведен пример того, как вы можете это сделать. * ** 1003 тысяча два * Пример

Предположим, у вас есть структура данных, как показано ниже. 

const Products = [
  {
    id: 1,
    name: 'Product 1'
  },
  {
    id: 2,
    name: 'Product 2'
  },
  {
    id: 3,
    name: 'Product 3'
  },
  {
    id: 4,
    name: 'Product 4'
  },
];

const Supervisors = [
  {
    belongsToPruduct: 1,
    name: 'SuperVisor 1' 
  },
  {
    belongsToPruduct: 3,
    name: 'SuperVisor 2' 
  },
  {
    belongsToPruduct: 2,
    name: 'SuperVisor 3' 
  },
  {
    belongsToPruduct: 4,
    name: 'SuperVisor 4' 
  }
];

И давайте предположим, что вы визуализируете Products в FlatList. Вы можете сделать что-то вроде ниже в вашей renderItem функции 

renderItem = ({ item }) => {
  const superviors = Supervisors.filter((supervisor) => supervisor.belongsToPruduct === item.id)
  return (
    <View style={styles.productContainer}>
      <Text style={styles.productName}>{item.name}</Text>
        <View style={styles.supervisorsContainer}>
          {
            superviors.map((supervisor) => <Text style={styles.supervisorName}>{supervisor.name}</Text>)
          }
        </View>
    </View>
  )
}

UPDATE

Ссылаясь на ваш комментарий, я думаю, что вы можете использовать SectionList вместо FlatList

<SectionList 
   renderSectionHeader={({ section: { title } }) => <Text style={{ fontWeight: 'bold' }}>{title}</Text>} 
   sections={[ 
     { title: 'Products', data: Products, renderItem: ({ item, index, section: { title, data } }) => <Text>{item.name}</Text> }, 
     { title: 'Supervisors', data: Supervisors, renderItem: ({ item, index, section: { title, data } }) => <Text>{item.name}</Text>}, 
    ]} 
   keyExtractor={(item, index) => item.name + index} 
 />
...