是否可以在2列Flatlist中进行行反向？

Question

我在react-native-android中创建了两列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

我建议只修改您的数据顺序：

例如，您可以引入一个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

Answer 2

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

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