Сделать VirtualizedList показывать как Grid - PullRequest
Новая
       38

Сделать VirtualizedList показывать как Grid

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

Я пытаюсь сделать что-то вроде этого:

Gird View

Проблема: проект был построен с immutablejs и в соответствиичтобы реагировать на нативные документы , я не могу использовать FlatList, поэтому я не могу использовать функцию поддержки numColumns этого компонента.AFAIK, мой единственный выбор - использовать VirtualizedList, как указывают документы, но я не могу понять, как отображать ячейки в виде сетки, как показано выше.

Я уже пытался добавить реквизиты style как в ячейку, так и в оболочку просмотра, но ни один из кодов, используемых для выравнивания ячеек, как и картинка, которую я разместил, не игнорируется.На самом деле он показывал отлично, когда я использовал ScrollView, но из-за ОГРОМНОЙ задержки я перемещаю код в VirtualizedList.

Любая помощь?Что-нибудь будет приветствоваться, я уже много копаю в Google, но не могу найти что-нибудь по этому поводу.

Пример кода: 

      <View>
        <VirtualizedList
          data={props.schedules}
          getItem={(data, index) => data.get(index)}
          getItemCount={(data) => data.size}
          keyExtractor={(item, index) => index.toString()}
          CellRendererComponent={({children, item}) => {
            return (
              <View style={{any flexbox code gets ignored here}}>
                {children}
              </View>
            )}}
          renderItem={({ item, index }) => (
            <Text style={{also here}} key={index}>{item.get('schedule')}</Text>
          )}
        />
      </View>

1 Ответ

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

Отвечая на мой собственный вопрос: я заработал, скопировав исходный код FlatList.js из репозитория react-native.Вот пример кода: 

<VirtualizedList
  data={props.schedules}
  getItem={(data, index) => {
    let items = []
    for (let i = 0; i < 4; i++) {
      const item = data.get(index * 4 + i)
      item && items.push(item)
    }
    return items
  }}
  getItemCount={(data) => data.size}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({item, index}) => {
    return (
      <View key={index} style={{flexDirection: 'row'}}>
        {item.map((elem, i) => (
          <View key={i}>
            <Text key={i}>{elem.get('horario')}</Text>
          </View>
        ))}
      </View>
    )
  }}
/>

Число 4 для количества столбцов.Ключевые части находятся в getItem и добавляются flexDirection: 'row' в renderItem в компоненте View.

...