React Native - Горизонтальный плоский список с оберткой столбца не принимает Flex должным образом? - PullRequest
Новая
       92

React Native - Горизонтальный плоский список с оберткой столбца не принимает Flex должным образом?

0 голосов
/ 11 апреля 2020

У меня есть динамический c плоский список со значениями, которые должны быть представлены в горизонтальном списке с 3 столбцами. Но я не могу заставить его отображаться так, как я хотел.

Я пытаюсь выполнить следующий код, 

    let data = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];
    const { width } = Dimensions.get('window');
    const itemWidth = (width - 12) / 3;

           <FlatList
                    columnWrapperStyle={{ justifyContent: 'space-around', alignItems: 'flex-start' }}
                    numColumns={3}
                    data={data}
                    showsVerticalScrollIndicator={false}
                    showsHorizontalScrollIndicator
                    keyExtractor={(item, index) => `${index}${item}`}
                    renderItem={(item) => {
                        return (
                            <View style={{ flex: 1, backgroundColor: '#ddd', minWidth: itemWidth, maxWidth: itemWidth }}>
                                <Text >
                                    Hello World
                            </Text>
                            </View>
                        );
                    }}
                />

Но вывод не такой, как я хотел.

Допустим, если список имеет длину, кратную 3, например 6,9,12, он работает так, как я хотел.

Но, если список имеет длину 8, первые две строки отображаются нормально. Но третий ряд дает полное пространство для оставшихся двух предметов. Что я не хочу.

В настоящее время я готов к выводу, как следует current output image

Но вывод должен быть, как, enter image description here

Кто-нибудь может предложить обходной путь?

Спасибо.

Ответы [ 2 ]

0 голосов
/ 11 апреля 2020

Поскольку вы вычисляете itemWidth вручную, вы можете использовать justify: flex-end для вашего columnWrapperStyle, а затем добавить marginRight: 6 к каждому первому и второму элементу в каждой строке: 

renderItem={(item, index) => {
  const isThirdColumn = (index + 1) % 3 === 0;
  const marginRight = isThirdColumn ? 0 : 6;

  return (
    <View style={{ marginRight, ...otherStyles }}>
0 голосов
/ 11 апреля 2020

Смотрите, я могу предоставить вам одно логическое решение, и я предполагаю, что вы хотите построить текст внутри Flatlist. Для этого вида сценария ios вам нужно добавить пустой div для соответствующих пустых слотов.

Если вы хотите, чтобы numOfColumns было 3, 

let data = ["item1", "item2", "item3", "item4", "item5", "item6", "item7", "item8"];

Сначала проверьте остаток и количество строк, которые будут добавлены 

let numOfRowsToBeAdded = 3-(data.length%3);
// here im ommitting if we get 0 as remainder as its not required
if(numOfRowsToBeAdded){
for(let i=0;i<numOfRowsToBeAdded;i++){
data.push(null);
}
}

Надеюсь, вы получили логи c. не стесняйтесь сомнений. плохая помощь

...