FlatList Horizontal делают два элемента в столбце подряд - PullRequest
Новая
       12

FlatList Horizontal делают два элемента в столбце подряд

0 голосов
/ 01 февраля 2019

Требуется лишь небольшое руководство по стилям.мне нужно сделать горизонтальный плоский список, в котором 1-й элемент должен иметь большую высоту, а затем другие элементы должны быть 2 в столбцах и т. д..

Чего я достиг

enter image description here

Что я хочу

enter image description here

И мой код 

<FlatList
                    horizontal
                    data={this.state.entries}
                    showsHorizontalScrollIndicator={false}
                    contentContainerStyle={{
                    }}
                    renderItem={({ item: rowData }) => {
                        return (
                            <TouchableOpacity
                                key={rowData.title} onPress={() => alert(rowData.title)}>
                                <Card>
                                    <CardItem cardBody>
                                        <Image source={{ uri: rowData.ImagePath }}
                                            style={{
                                                height: (rowData.id == 1 ? 200 : 90),
                                                width: (rowData.id == 1 ? 200 : 150),
                                                flex: 1
                                            }} />
                                    </CardItem>
                                </Card>
                            </TouchableOpacity>
                        );
                    }}
                    keyExtractor={(item, index) => index.toString()}
                />

Кто-нибудь поможет мне.Очень ценится.

Спасибо

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

К сожалению, как вы, возможно, уже догадались, реквизит numColumns будет работать только на вертикальном FlatList.

Несколько столбцов могут отображаться только при горизонтальном = {false} и будут зигзагообразными, как макет flexWrap.Все элементы должны быть одинаковой высоты - макеты кладки не поддерживаются.

Единственный способ достичь желаемого - объединить элементы после первого в группы по два.

Так что, если бы у вас был такой набор данных 

let data = [
  { text: 'one' },
  { text: 'two' },
  { text: 'three' },
  { text: 'four' },
  { text: 'five' },
  { text: 'six' }
]

Вам нужно было бы преобразовать его во что-то вроде этого, вам не нужно делать это так, оно действительно работаетдля вас, но это один из возможных способов. 

let data = [
  { text: 'one' },
  { item1: { text: 'two' }, item2: { text: 'three' } },
  { item1: { text: 'four' }, item2: { text: 'five' } },
  { item1: { text: 'six' }},
]

Объединение предметов в группы из двух означает, что вы можете подделать , что у вас есть сетка макета.

Тогда вся магия происходит в вашей функции renderItem.Там, если индекс равен 0, вы можете показать свое большое изображение, а затем, если это не так, вы можете показать меньшие изображения.

Вот пример кода, который должен помочь вам понять, о чем я говорю.

import React, {Component} from 'react';
import { View, StyleSheet, Text, FlatList } from 'react-native';
export default class Screen1 extends React.Component {

  state = {
    data: [
      { text: 'one' },
      { item1: { text: 'two' }, item2: { text: 'three' } },
      { item1: { text: 'four' }, item2: { text: 'five' } },
      { item1: { text: 'six' }},
    ]
  }

  renderItem = ({item, index}) => {
    if (index === 0) {
      return (
        <View style={styles.bigSquare}>
          <Text>{item.text}</Text>
        </View>
      )
    } else {
      return (
        <View>
          <View style={styles.smallSquare}>
            <Text>{item.item1.text}</Text>
          </View>
          {item.item2 && <View style={[styles.smallSquare, {backgroundColor: 'red'}]}>
            <Text>{item.item2.text}</Text>
          </View>}
        </View>
      )
    }
  }

  keyExtractor = (item, index) => `${index}`;

  render() {
    return (
      <View style={styles.container}>
        <FlatList 
          horizontal={true}
          data={this.state.data}
          renderItem={this.renderItem}
          keyExtractor={this.keyExtractor}
        />
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  bigSquare: {
    height: 220, 
    width: 220, 
    margin: 10, 
    backgroundColor: 'yellow', 
    justifyContent: 'center', 
    alignItems: 'center'
  },
  smallSquare: {
    height: 100, 
    width: 100, 
    margin: 10, 
    backgroundColor: 'green', 
    justifyContent: 'center', 
    alignItems: 'center'
  }
});

Вот в перекус https://snack.expo.io/@andypandy/horizontal-flatlist-with-grid

0 голосов
/ 02 февраля 2019

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

<FlatList
      horizontal
      data={this.state.entries}
      contentContainerStyle={{ flexWrap: "wrap", flexDirection: "column" }}
      renderItem={({ item: rowData }) => {
            return (
                 <TouchableOpacity>
                      <Card>
                          <CardItem cardBody>
                               <View
                                 style={{
                                        height: rowData.id == 1 ? 200 : 90,                                                                                
                                        width: rowData.id == 1 ? 200 : 150,
                                        borderWidth: 1,
                                  }}
                             />
                        </CardItem>
                    </Card>
               </TouchableOpacity>
              );
          }}
/>
...