是否可以在 2 列 Flatlist 中进行行反转？答案

【问题标题】：Is it possible to row-reverse in a 2 columns Flatlist?是否可以在 2 列 Flatlist 中进行行反转？
【发布时间】：2019-05-12 12:09:15
【问题描述】：

我在 react-native-android 中创建了一个 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'

但没有成功！

【问题讨论】：

原来叫row？
我在下面回答了你的问题。如果我的回答对您有所帮助，我将不胜感激和/或将其标记为已接受的答案或任何其他反馈。谢谢

标签： react-native react-native-android react-native-flatlist react-native-flexbox

【解决方案1】：

您可以在columnWrapperStyle 中使用flexDirection: 'row-reverse'：

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

【讨论】：

【解决方案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

【讨论】：

我同意@Tim 的解决方案。不幸的是，FlatList 不支持这种排序方式。我创建了一个演示 - snack.expo.io/@hristoeftimov/reverse-blocks。它有一个属性inverted，但是它将项目从下到上颠倒。 Flatlist 不支持FlexDirection 和FlexWrap。因此，唯一的解决方案是更改项目的顺序:)
@HristoEftimov 感谢您的反馈。另外，我将不胜感激；）
当然。你明白了:)