Возможно ли выполнить обратный ряд в плоском списке из 2 столбцов?

Question

я создаю 2 колонки FLatlist в реаги-натив-андроид

1    |    2
------------
3    |    4

Я хочу это

2    |    1
4    |    3

Я пробую это:

<View style={{flex:1,flexDirection:'row-reverse'}}>
        <FlatList
            style={{flex:1,flexDirection:'row-reverse'}}

и в элементе рендеринга я использую flexDirection:'row-reverse' тоже

но безуспешно!

Answer 1

Вы можете использовать flexDirection: 'row-reverse' внутри columnWrapperStyle:

<FlatList
  numColumns={2}
  columnWrapperStyle={{ flexDirection: 'row-reverse' }}
  data={data}
  renderItem={yourRenderFunction}
/>

Answer 2

Я бы предложил просто изменить порядок ваших данных:

Например, вы можете ввести функцию arrayMove, которая выполняет переупорядочение.

Пример:

  const data = [
        { 
          'id': 1 
        },
        { 
          'id': 2
        },
        { 
          'id': 3
        },
        { 
          'id': 4
        } 
   ];
  
  
function arrayMove(arr, fromIndex, toIndex) {
  var element = arr[fromIndex];
  arr.splice(fromIndex, 1);
  arr.splice(toIndex, 0, element);
}
console.log('data', data);
arrayMove(data, 1, 0);
arrayMove(data, 3, 2);
console.log('data permutated', data); 

Рабочая экспо:

https://snack.expo.io/ryeNv5S2E